将 Chart.js 中的两个数据集连接成一行答案

【问题标题】：Connecting Two Datasets in Chart.js Into a Single Line将 Chart.js 中的两个数据集连接成一行
【发布时间】：2017-12-19 20:44:38
【问题描述】：

我在 Chart.JS 中有两个独立的数据集，一个代表历史数据的选择，另一个代表基于该数据的预测。这是图表当前的样子。历史数据为黑色，预测为蓝色：

我想将这两个数据集保留为单独的数据集，但将它们连接起来，以便图表显示为一条线。在以前的版本中，我通过向预测数据集中添加一个数据点来实现这一点，该数据点与历史集中的最终数据点完全相同，但这会产生我想避免的不准确冗余。

除非有一些我一直找不到的 chart.js 设置，否则我担心我可能必须注册一个插件来执行此操作，这似乎会变得不必要地笨拙。谢谢。

【问题讨论】：

Chart.js 中的数据集只是一个值数组。如果您将数据集放在单独的数组中并将它们组合起来仅用于填充图表，它应该可以按您的意愿工作。我想这也取决于您使用的数据结构。
这是个好主意，但问题是在这种情况下，我不确定如何更改第二个数据集行的颜色以非常清楚哪个值是历史值和预测值。
我建议你看一下网站上的多轴示例。它可能会有所帮助。 chartjs.org/samples/latest/charts/line/multi-axis.html我相信这与图表中每个数据集的背景颜色属性有关。
是的，我了解如何为每个数据集分配不同的颜色，问题是如果我组合数据集以获得一条连续线，那么我将不得不选择一种定义整个数据集的颜色.我目前正在探索是否可以找到最后一个历史点的索引，并以某种方式更改其后线上每个点的线颜色。
我不认为 Chart.js 内置支持不同的点颜色。它们具有更改用于每个点的符号的点样式。您可以更改不同数据集的符号大小。插值示例可能是您的折衷方案。

标签： javascript chart.js

【解决方案1】：

设法解决了问题，发布以帮助遇到类似问题的任何人。

我最终创建了一个 chart.js 插件，它绘制一条线来查找最后一个历史点的 X 和 Y 坐标，然后在该点和第一个预测点的 X 和 Y 坐标之间画一条线。在用头撞了一会儿之后，我简直不敢相信它是如此简单。

我在下面发布代码 - 这是一个反应应用程序，因此它可能无法完全适合每个用例。 JSFiddle 没有设置为工作，但您可以了解如何获取点数据，这对我来说是最难的部分！

//Grab the chart meta data and identify the x and y coordinates of the 
appropriate points
    var meta = chartInstance.getDatasetMeta(0);
    var predictionMeta = chartInstance.getDatasetMeta(1);
    var chartFirstPointX = meta.data[this.props.actualData.length - 1]._model.x;
    var lastActualY = meta.data[this.props.actualData.length - 1]._model.y;
    
    var predictionFirstPointX = predictionMeta.data[0]._model.x;
    var predictionFirstPointY = predictionMeta.data[0]._model.y;



    Chart.pluginService.register({
      id: 'forecastLine',
      beforeDraw: function(chartInstance) {
        var ctx = chartInstance.chart.ctx,
            yTop = chartInstance.chartArea.top,
            yBottom = chartInstance.chartArea.bottom,
            firstPredictionX = predictionFirstPointX,
            firstPredictionY = chartInstance.config.data.datasets[1].data[0].y;

        ctx.fillStyle = '#FAFAFA';
        ctx.fillRect(0, 0, chartInstance.chart.width, chartInstance.chart.height);
//draw a vertical line separating the two datasets, then draw a line 
connecting them
       ctx.save();
       ctx.beginPath();
       ctx.moveTo(chartFirstPointX, yBottom);
       ctx.lineTo(chartFirstPointX, yTop);
       ctx.moveTo(chartFirstPointX, lastActualY);
       ctx.lineTo(predictionFirstPointX, predictionFirstPointY);
       ctx.lineWidth = 2;
       ctx.strokeStyle = '#68D1FE';
       ctx.stroke();
       ctx.restore();

【讨论】：