HighCharts Dynamic multiseries Column Chart showin

问题:

I am using highcharts on a project, I am having trouble with the creation of multiple series of data updating dynamically generating a column chart, my aim is to keep all the series at a static position and change according to the data. Till now i have achieved this : https://jsfiddle.net/jk05qcq4/

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



  ]
});

回答1:

I solved the answer by reducing the size of the for loop from -19 to 0 for all the series:

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

check the fiddle for more understanding : https://jsfiddle.net/qkdwu3p3/