如何根据数据更改线条颜色 - chartist 或 chart.js

Question

一直在使用 chartist 或 chart.js 寻找解决方案，但一直空着。 我正在寻找一种方法来创建折线图并根据数据更改线的颜色。

示例数据集：

[
    {time: '3:00:00', speed: 20, direction: 345},
    {time: '3:01:00', speed: 0, direction: 0},
    {time: '3:02:00', speed: 25, direction: 90},
    {time: '3:03:00', speed: 10, direction: 180},
    {time: '3:04:00', speed: 5, direction: 0}
]

我正在寻找时间为 x 轴，速度为 y 轴，然后根据方向更改线段的颜色。 似乎大多数图表库（除非我开始深入研究 d3）在创建折线图时会为整个系列创建一条大线，并且不允许您设置线的各个部分的样式。 这里有一个很棒的 chartjs 示例，但是颜色不是基于数据的（它只是一组任意的颜色）：

https://blog.vanila.io/chart-js-tutorial-how-to-make-gradient-line-chart-af145e5c92f9

Answer 1

您可以使用Plugin Core API创建scatter并直接在画布上绘制线条。 API 提供了一系列可用于执行自定义代码的钩子。

在下面的代码片段中，我使用afterDraw钩子在数据点之间绘制连接线。 它们的颜色取决于起始数据点的direction属性。

 const rawData = [ {time: '3:00:00', speed: 20, direction: 345}, {time: '3:01:00', speed: 0, direction: 0}, {time: '3:02:00', speed: 25, direction: 290}, {time: '3:03:00', speed: 10, direction: 180}, {time: '3:04:00', speed: 5, direction: 0} ]; const data = rawData.map(o => ({ x: moment(o.time, 'H:mm:ss').toDate().getTime(), y: o.speed})); const colorsPer100 = ['green', 'orange', 'blue', 'red']; new Chart(document.getElementById("myChart"), { type: "scatter", plugins: [{ afterDraw: chart => { var ctx = chart.chart.ctx; var xAxis = chart.scales['x-axis-1']; var yAxis = chart.scales['y-axis-1']; chart.config.data.datasets[0].data.forEach((value, index) => { if (index > 0) { var valueFrom = data[index - 1]; var xFrom = xAxis.getPixelForValue(valueFrom.x); var yFrom = yAxis.getPixelForValue(valueFrom.y); var direction = rawData[index -1].direction; var xTo = xAxis.getPixelForValue(value.x); var yTo = yAxis.getPixelForValue(value.y); ctx.save(); ctx.strokeStyle = colorsPer100[Math.floor(direction / 100)]; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(xFrom, yFrom); ctx.lineTo(xTo, yTo); ctx.stroke(); ctx.restore(); } }); } }], data: { datasets: [{ label: "My Dataset", data: data, borderColor: "rgb(75, 192, 192)" }] }, options: { legend: { display: false }, scales: { xAxes: [{ type: 'time', time: { unit: 'minute', displayFormats: { minute: 'H:mm:ss' } }, }] } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <canvas id="myChart" height="90"></canvas>

Answer 2

uminder 有一个有趣的解决方案。 在另一个线程中，有人发布了一个我使用的解决方案 - 他们只是创建了一个与数据集大小相同的颜色数组（并将其与数据一起输入）。 这很好用，而且比我想象的要简单得多。