开始使用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中文网其他相关文章！