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柱状图一次只显示一组系列

回答

相关问题