首頁 > web前端 > js教程 > 開始使用Chart.js:線和條形圖

開始使用Chart.js:線和條形圖

Jennifer Aniston
發布: 2025-03-18 11:19:22
原創
558 人瀏覽過

開始使用Chart.js:線和條形圖

本教程構建在先前的圖表上。JS簡介,演示線和條形圖創建。我們將探索自定義選項,以增強圖表外觀和數據表示。

線圖:隨著時間的推移可視化變化

線圖有效地說明了一個變量與另一個(通常是時間)的關係如何變化。例如,它們是隨著時間的推移顯示車輛速度的理想選擇。

Chart.js簡化了線路圖的創建。默認情況下,圖表中充滿了rgba(0, 0, 0, 0.1) 。要使背景顏色可見,請確保設置backgroundColor屬性,並且fill屬性為truetension鍵允許自定義立方插值,從而影響數據點之間的線曲線。設置stepped"middle"會產生類似逐步的效果。

數據點之間的各個段可以是唯一的樣式。此示例顯示了兩輛汽車的速度:

 const checkspeed =(ctx,color_a,color_b)=> ctx.p0.parsed.y> ctx.p1.parsed.y? color_a:color_b;

令datafirst = {
  標籤:“汽車A-速度(mph)”,
  數據:[0,59,75,20,20,55,40],
  BorderColor:“黑色”,
  背景色:“透明”,
  BorderDash:[3,3],
  步進:“中間”
};

令dataSecond = {
  標籤:“汽車B-速度(mph)”,
  數據:[20、15、60、60、65、30、70],
  BorderColor:“藍色”,
  背景色:“透明”,
  部分: {
        borderColor:ctx => checkspeed(ctx,'orangered','yellowgreen'),
  },,
};

令SpeedData = {
  標籤:[“ 0s”,“ 10s”,“ 20S”,“ 30S”,“ 40S”,“ 50S”,“ 60S”],
  數據集:[DataFirst,DataSecond]
};

令LineChart =新圖表(SpeedCanvas,{
  類型:“線”,
  數據:SpeedData
});
登入後複製

該代碼比較連續的數據點。如果速度降低,則使用orangered ;否則, yellowgreen

條形圖:多個Y軸為清晰

對於具有不同量表的多個數據集,使用多個Y軸可增強可讀性。每個數據集可以使用yAxisID鍵分配給特定的Y軸。

令GravityBars ='#f06292';
令密度鍵='#4db6ac';

讓densedata = {
  標籤:“行星密度(kg/m3)”,,
  數據:[5427,5243,5514,3933,1326,687,1271,1638],
  背景彩色:密度鍵,
  Yaxisid:“ Y軸密度”
};

令GravityData = {
  標籤:“行星的重力(M/S2)”,,
  數據:[3.7,8.9,9.8,3.7,23.1,9.0,8.7,11.0],
  背景彩色:GravityBars,
  Yaxisid:“ Y軸 - 重力”
};

令PlanetData = {
  標籤:[“水星”,“金星”,“地球”,“火星”,“木星”,“土星”,“天王星”,“ Neptune”],
  數據集:[denseptata,raveritydata]
};

令ChartOptions = {
  Barpercentage:1,
  類別:0.8,
  秤:{
    “ y軸密度”:{
      網格: {
        顏色:密度鍵,
        TickColor:密度桿,
        邊界顏色:密度桿
      },,
      tick:{
        顏色:密度桿
      },,
      位置:“左”
    },,
    “ Y軸 - 重力”:{
      網格: {
        顏色:重力桿,
        TickColor:GravityBars,
        邊界顏色:GravityBars
      },,
      tick:{
        顏色:GravityBars
      },,
      位置:“右”
    }
  }
};

令barchart =新圖表(densecanvas,{
  類型:“ bar”,
  數據:PlanetData,
  選項:ChartOptions
});
登入後複製

此示例使用唯一的yAxisID值,並在chartOptions中為每個軸定製網格,tick和邊框顏色。 barPercentagecategoryPercentage Control桿間距。

結論

本教程涵蓋了Chart.js中的基本線路和條形圖創建和自定義,使您能夠創建視覺上吸引人且內容豐富的圖表。下一個教程將探索雷達和極地圖表。

以上是開始使用Chart.js:線和條形圖的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板