高图：实时更新样条图可将y轴数据设置为零

Question

我正在尝试使用highcharts在样条曲线类型图中显示一组动态数据。

我的样条曲线类型折线图包含4系列数据，需要通过服务呼叫进行更新。服务返回数据数组，例如[0.345、0.465、0、0.453]，我想用数组中的相应值更新每个系列的y值。

但是我的图表未按预期绘制数据。即使我收到不同的y值，在图表中它也始终显示为0。

这是我的源代码。非常感谢有人能帮助我解决问题或提供解决方案。

function drawHighChart() {
  hchart = Highcharts.chart('container', {
    chart: {
      type: 'spline',
      animation: Highcharts.svg,
      marginRight: 10,
    },

    time: {
      useUTC: false
    },

    title: {
      text: 'Audio Analytics'
    },

    xAxis: {
      tickInterval: 1,
    },

    yAxis: {
      title: {
        text: 'Prediction'
      },
      min: 0,
      max: 1,
      tickInterval: 0.5,
      plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
      }]
    },

    tooltip: {
      headerFormat: '<b>{series.name}</b><br/>',
      pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
    },

    legend: {
      enabled: false
    },

    exporting: {
      enabled: false
    },

    /* Initially I'm setting some hardcoded values for each series.*/
    
    series: [{
      name: 'Calm',
      data: [0.43934, 0.52503, 0.57177, 0.69658, 0.97031, 0.119931, 0.137133]
    }, {
      name: 'Happy',
      data: [0.24916, 0.24064, 0.29742, 0.0000, 0.32490, 0.0000, 0.38121]
    }, {
      name: 'Angry',
      data: [0.11744, 0.17722, 0.16005, 0.19771, 0.20185, 0.24377, 0.32147]
    }, {
      name: 'Disgust',
      data: [0.7988, 0.15112, null, 0.22452, 0.34400, null, 0.34227]
    }],

  });
}

现在，当我在Windows onload上调用drawHighChart()时，它就是它的输出。

现在，从这里开始，随着服务返回数据数组，我需要动态更新每个系列。

这是我的函数，每当服务返回响应时，动态更新图表。每次我称之为功能时，我都会传递一个由响应数据构成的数据数组。

initiVal = 7; //This is a gloabl variable that increases x-axis value from 7.

function updateHighChart(dataArray) {
  var series = hchart.series[0];
  var series1 = hchart.series[1];
  var series2 = hchart.series[2];
  var series3 = hchart.series[3];
  var x = initiVal;
  
  y = dataArray[0];
  y1 = dataArray[1];
  y2 = dataArray[2];
  y3 = dataArray[3];
  console.log("dataArray: " + dataArray);
  
  series.addPoint([x, y], true, true);
  series1.addPoint([x, y1], true, true);
  series2.addPoint([x, y2], true, true);
  series3.addPoint([x, y3], true, true);
  
  initiVal++;
}

但是，即使将数据动态分配给每个系列中的y轴值，它们也不会按图表中的预期进行更新。当数据需要在图表中动态更新时，这就是图表在6秒/实例之后的外观。