Как я могу добавить данные прогноза и фактические данные в один график с диаграммой JS?

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 
      }
    });

Я хочу получить уникальный график, на котором у меня будет часть актуальных данных в реальном времени, а следующая часть прогнозных данных . Все эти данные поступают из базы данных в виде таймсерий.

Answer 1

вы можете использовать плагин и изменить chartLineStlyle из того места, где вы хотите сделать пунктир.

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

Использовать доступный плагин

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