HighCharts動態multiseries柱狀圖一次只顯示一組系列

我在項目上使用highcharts，我在創建多個數據系列動態生成一個柱狀圖時遇到了麻煩，我的目標是保持所有該系列在靜態位置並根據數據而改變。到現在我已經實現了這個：https://jsfiddle.net/jk05qcq4/HighCharts動態multiseries柱狀圖一次只顯示一組系列

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



    ] 
});

來源

2016-12-20 Saikat Sinha

你能詳細解釋一下，每秒會發生什麼？ – morganfree

嗨，我想用更寬的酒吧一次只製作一套系列。因爲目前很難形象化。 –

在示例中更加清楚https://jsfiddle.net/jk05qcq4/ BleedEnthalpy [0]，BypassRatio [0]，...和其他對象的第0個元素應該在一秒鐘出現，另一秒鐘在第一個BleedEnthalpy元素，BypassRatio等與更寬的酒吧。謝謝:) –

我解決了這個答案通過減少從-19循環大小0所有系列：

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

檢查搗鼓更多的瞭解：https://jsfiddle.net/qkdwu3p3/

來源

2016-12-23 12:08:50

HighCharts動態multiseries柱狀圖一次只顯示一組系列

回答

相關問題