本教程构建在先前的图表上。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中文网其他相关文章！
