charts - 如何使用 ChartJS 在同一图表中添加预测数据和实际数据？

Question

我想在同一张图中实时添加预测数据和实际数据以获得类似的结果：

我的代码是这样的：

 xArr.push(jsonRes[i].timestamp)
    yArr.push(jsonRes[i].deplacement)
    yMax.push(3)
    yMin.push(-3)
    yPredict.push()
    // draw chart
    let canvas = document.getElementById("myChart");
    let ctx = canvas.getContext('2d');
    myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: xArr,
        datasets: [{
          label: 'Déplacement cumulé de la chaine inclinométrique (mm)', // Name the series
          data: yArr, // Specify the data values array
          fill: false,
          borderColor: '#2196f3', // Add custom color border (Line)
          backgroundColor: '#2196f3', // Add custom color background (Points and Fill)
          borderWidth: 1 // Specify bar border width
        }, {
          label: 'Déplacement max toléré', // Name the series
          data: yMax, // Specify the data values array
          fill: true,
          borderColor: '#b30000'
        }, {
          label: 'Déplacement min toléré', // Name the series
          data: yMin, // Specify the data values array
          fill: true,
          borderColor: '#b30000'
        }, {
          label: 'ML', // Name the series
          data: yPredict, // Specify the data values array
          fill: true,
          borderColor: '#b30000'
        }
        ]
      },
      options: {
        responsive: true, // Instruct chart js to respond nicely.
        maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height 
      }
    });

我想获得一个独特的图表，其中我将实时拥有一部分实际数据和下一部分预测数据。所有这些数据都作为时间序列来自数据库。

标签： chartschart.jspredict

Answer 1

您可以使用插件并从您想要虚线的地方更改chartLineStlyle。

https://www.chartjs.org/docs/latest/developers/plugins.html

使用插件可用的钩子

var chart = new Chart(ctx, {
plugins: [{
    beforeInit: function(chart, options) {
        //..
    }
}] });