Highcharts Multiple Series Dynamic Column Chart Update

Question

Я использую highcharts в проекте, у меня возникают проблемы с созданием динамических обновлений нескольких серий данных. Я не уверен, что я делаю неправильно, ниже приведены данные и код образца. Обратите внимание, что приведенный ниже код работает с одиночной серией данных, но какие изменения мне нужно сделать для более чем одной серии?

Примеры данных

{"BleedEnthalpy":{"0":1.495308553,"1":0.4441197889,"2":0.8609127688,"3":1.0913122458,"4":1.2085670076},"BypassRatio":{ "0":0.0602932228,"1":0.0020143045,"2":0.1111420462,"3":0.0017957639,"4":0.0665590016}} 

Код

Highcharts.chart('other', { 
     chart: { 
      type: 'column', 
      backgroundColor: null, 
      animation: Highcharts.svg, // don't animate in old IE 
      marginRight: 10, 
      events: { 
       load: function() { 
        var iter=0; 
        // set up the updating of the chart each second 
        var series = this.series[0]; 


        myInterval = setInterval(function() { 
         var len = Object.keys(BleedEnthalpy).length; 
      if (iter < len) { 
       series.addPoint([(new Date()).getTime(), BleedEnthalpy[iter]], true, true); 


       iter++; 
      } else { 
       clearInterval(myInterval); 
      } 
      }, 1000); 
       } 
      } 
     }, 
     title: { 
      text: null 
     }, 
     xAxis: { 
      type: 'datetime', 
      tickPixelInterval: 150 
     }, 
     yAxis: { 
      title: { 
       text: 'Value' 
      }, 
      plotLines: [{ 
       value: 0, 
       width: 1, 
       color: '#808080' 
      }] 
     }, 
     tooltip: { 
      formatter: function() { 
       return '<b>' + this.series.name + '</b><br/>' + 
        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + 
        Highcharts.numberFormat(this.y, 4); 
      } 
     }, 
     legend: { 
      enabled: false 
     }, 
     exporting: { 
      enabled: false 
     }, 
    rangeSelector: { 
    enabled: false 
    }, 

    navigator: { 
    enabled: false 
    }, 
    scrollbar: { 
      enabled: false 
     }, 


     series: [{ 
      name: 'R data', 
      data: (function() { 
       // generate an array of random data 
       var data = [], 
        time = (new Date()).getTime(), 
        i; 

       for (i = -19; i <= 0; i += 1) { 


        data.push({ 
         x: time + i * 1000, 
         y: BleedEnthalpy 
        }); 

       } 
       return data;}()) }] }); 

Answer 1

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

Если у вас есть два набора данных:

var BleedEnthalpy = {"0":1.495308553,"1":0.4441197889,"2":0.8609127688,"3":1.0913122458,"4":1.2085670076}; 

var BypassRatio = { "0":0.0602932228,"1":0.0020143045,"2":0.1111420462,"3":0.0017957639,"4":0.0665590016}; 

создать две серии:

series: [{ 
    ... 
}, { 
    ... 
}] 

и затем в интервале времени обратного добавления точек в обеих серий

load: function() { 
    var iter = 0; 
    // set up the updating of the chart each second 
    var series = this.series[0], 
     series2 = this.series[1]; 


    myInterval = setInterval(function() { 
     var len = Object.keys(BleedEnthalpy).length; 
     var len2 = Object.keys(BypassRatio).length, 
      x = new Date().getTime(); 

     if (iter < len) { 
     series.addPoint([x, BleedEnthalpy[iter]], false, true); 
     series2.addPoint([x, BypassRatio[iter]], true, true); 


     iter++; 
     } else { 
     clearInterval(myInterval); 
     } 
    }, 1000); 
    } 

вторая ось y не нужна, но полезно, если серия имеет разные масштабы.

пример: https://jsfiddle.net/jv8a1955/