Блог

Главная - Вопросы по программированию - Highcharts: обновление сплайновой диаграммы в реальном времени обнуляет данные по оси y

Highcharts: обновление сплайновой диаграммы в реальном времени обнуляет данные по оси y

#javascript #dynamic #highcharts #updates #spline

#javascript #динамический #highcharts #Обновления #сплайн

Вопрос:

Я пытаюсь отобразить набор динамических данных на диаграмме типа сплайн с использованием highcharts.

Моя линейная диаграмма типа spline содержит 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]
    }],

  });
}

Теперь, когда я вызываю drawHighChart() при загрузке Windows, это то, что он выводит.

введите описание изображения здесь

Теперь отсюда мне нужно динамически обновлять каждую серию, поскольку сервис возвращает массив данных.

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

 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-й секунды / экземпляра, когда данные на диаграмме необходимо динамически обновлять.

введите описание изображения здесь

Комментарии:

1. Привет @Ishara Amarasekera, эта проблема выглядит очень странно. Возможно, предоставленные вами данные представлены в неправильном формате или вы случайно модифицируете свои данные.

2. @ppotaczek Это именно то, что я подумал, но я все еще не могу понять, почему и когда это происходит. Потому что, когда я регистрирую dataArray внутри функции updateHighChart (), я вижу, что в конкретном экземпляре переданы правильные данные. Кажется, что даже значения y содержат правильные данные, когда я регистрирую их в консоли. Похоже, эта проблема возникает внутри метода addPoint ().

3. Вы пытались использовать браузер debugger , чтобы следить за работой кода?

4. @ppotaczek Большое вам спасибо за вашу проницательность. Я только что решил свою проблему. Как вы упомянули в своем предыдущем комментарии, проблема заключалась в формате данных. Даже если данные, переданные в функцию updateHighChart (), кажутся извне в правильном формате, возникла проблема с форматом данных из-за небольшой модификации, которую я внес перед передачей их в функцию updateHighChart (). Таким образом, диаграмма не смогла идентифицировать их как точки данных, чтобы отобразить их на диаграмме. Следовательно, он продолжает выводить нули по оси y.