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

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

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

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

Chart.js簡化了線路圖的創建。默認情況下，圖表中充滿了rgba(0, 0, 0, 0.1) 。要使背景顏色可見，請確保設置backgroundColor屬性，並且fill屬性為true 。 tension鍵允許自定義立方插值，從而影響數據點之間的線曲線。設置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和邊框顏色。 barPercentage和categoryPercentage Control桿間距。

結論

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

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