本教程構(gòu)建在先前的圖表上。JS簡介，演示線和條形圖創(chuàng)建。我們將探索自定義選項，以增強圖表外觀和數(shù)據(jù)表示。

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

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

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

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

 const checkspeed =（ctx，color_a，color_b）=> ctx.p0.parsed.y> ctx.p1.parsed.y？ color_a：color_b;

令datafirst = {
  標簽：“汽車A-速度（mph）”，
  數(shù)據(jù)：[0，59，75，20，20，55，40]，
  BorderColor：“黑色”，
  背景色：“透明”，
  BorderDash：[3，3]，
  步進：“中間”
};

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

令SpeedData = {
  標簽：[“ 0s”，“ 10s”，“ 20S”，“ 30S”，“ 40S”，“ 50S”，“ 60S”]，
  數(shù)據(jù)集：[DataFirst，DataSecond]
};

令LineChart =新圖表（SpeedCanvas，{
  類型：“線”，
  數(shù)據(jù)：SpeedData
}）;

該代碼比較連續(xù)的數(shù)據(jù)點。如果速度降低，則使用orangered ；否則， yellowgreen 。

條形圖：多個Y軸為清晰

對于具有不同量表的多個數(shù)據(jù)集，使用多個Y軸可增強可讀性。每個數(shù)據(jù)集可以使用yAxisID鍵分配給特定的Y軸。

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

讓densedata = {
  標簽：“行星密度（kg/m3）”，，
  數(shù)據(jù)：[5427，5243，5514，3933，1326，687，1271，1638]，
  背景彩色：密度鍵，
  Yaxisid：“ Y軸密度”
};

令GravityData = {
  標簽：“行星的重力（M/S2）”，，
  數(shù)據(jù)：[3.7，8.9，9.8，3.7，23.1，9.0，8.7，11.0]，
  背景彩色：GravityBars，
  Yaxisid：“ Y軸 - 重力”
};

令PlanetData = {
  標簽：[“水星”，“金星”，“地球”，“火星”，“木星”，“土星”，“天王星”，“ Neptune”]，
  數(shù)據(jù)集：[denseptata，raveritydata]
};

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

令barchart =新圖表（densecanvas，{
  類型：“ bar”，
  數(shù)據(jù)：PlanetData，
  選項：ChartOptions
}）;

此示例使用唯一的yAxisID值，并在chartOptions中為每個軸定制網(wǎng)格，tick和邊框顏色。 barPercentage和categoryPercentage Control桿間距。

結(jié)論

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

以上是開始使用Chart.js：線和條形圖的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！