HighCharts Dynamic multiseries一度に1セットのシリーズのみを表示する縦棒グラフ

Question

私はプロジェクトでハイチャートを使用しています。縦棒グラフを動的に更新する複数のシリーズのデータ​​の作成に問題があります。静的な位置にあり、データに応じて変化します。 は、今まで私はこれを達成した：

{ 
    name: 'HPCOutletTemp', 

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

     for (i = 0; i <= 0; i += 1) { 
     data.push({ 
      x: time + i * 1000, 
      y: HPCOutletTemp 
     }); 
     } 
     return data; 
    }()) 
    } 

チェックより理解するためにフィドル：私は、すべてのシリーズのために0に-19からのforループのサイズを減らすことによって答えを解決

Highcharts.chart('container', { 
    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]; 
         var series2 = this.series[1]; 
         var series3 = this.series[2]; 
         var series4 = this.series[3]; 
         var series5 = this.series[4]; 
         var series6 = this.series[5]; 


     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]], false, true); 
        series3.addPoint([x, CorrCoreSpeed[iter]], false, true); 
        series4.addPoint([x, CorrFanSpeed[iter]], false, true); 
        series5.addPoint([x, FuelFlowRatio[iter]], false, true); 
        series6.addPoint([x, HPCOutletTemp[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: true 
    }, 
    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; 
    }()) 
    }, { 
    name: 'Bypass ratio', 
    maxPointWidth: 90, 
    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: BypassRatio 
     }); 
     } 
     return data; 
    }()) 
    }, 

    { 
    name: 'CorrCoreSpeed', 

    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: CorrCoreSpeed 
     }); 
     } 
     return data; 
    }()) 
    }, 
    { 
    name: 'CorrFanSpeed', 

    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: CorrFanSpeed 
     }); 
     } 
     return data; 
    }()) 
    }, 
    { 
    name: 'FuelFlowRatio', 

    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: FuelFlowRatio 
     }); 
     } 
     return data; 
    }()) 
    }, 
    { 
    name: 'HPCOutletTemp', 

    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: HPCOutletTemp 
     }); 
     } 
     return data; 
    }()) 
    } 



    ] 
}); 

Answer 1

https://jsfiddle.net/jk05qcq4/ ：https://jsfiddle.net/qkdwu3p3/