将Chart.js中的两个数据集连接到一行

Question

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

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

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

Answer 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();