Chart.jsの2つのデータセットを1行に接続

Question

私はChart.JSに2つの別々のデータセットを持っています.1つは履歴データを選択し、もう1つはそのデータに基づいて予測します。ここにチャートが現れている様子があります。履歴データが黒であり、予測は青色である：

私は別のデータセットのような2つを維持するが、単一のラインようにグラフが表示され、それらを接続したいです。以前のバージョンでは、履歴セットの最終データポイントの正確な複製である予測データセットにデータポイントを追加することでこれを達成しましたが、これは避けたい不正確な冗長性を作成します。

chart.jsが設定されていない限り、私はプラグインを登録する必要があるかもしれないと心配しています。これは不必要に窮屈になるようです。ありがとう。

Answer 1

問題を解決するために管理され、同様の問題を持つ人を助けるために投稿されました。

私は最後の履歴ポイントのX座標とY座標を見つけ出し、最初の予測ポイントのX座標とY座標の間に線を描くchart.jsプラグインを作成しました。それに対して私の頭を叩いた後、私はそれがとても簡単だとは信じられません。

私は下にコードを掲載しています。これは反応アプリケーションなので、すべてのユースケースにきれいに収まるとは限りません。 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();