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

您必须创建另一个系列，然后以与第一个系列相同的方式添加点。

如果您有两组数据：

{u'Images': [{u'Architecture': 'x86_64',
   u'BlockDeviceMappings': [{u'DeviceName': '/dev/xvda',
     u'Ebs': {u'DeleteOnTermination': True,
      u'Encrypted': False,
      u'SnapshotId': 'snap-0ddda62ff076afbc8',
      u'VolumeSize': 8,
      u'VolumeType': 'gp2'}}],
   u'CreationDate': '2016-11-13T14:03:45.000Z',
   u'Description': 'Debian jessie amd64',
   u'EnaSupport': True,
   u'Hypervisor': 'xen',
   u'ImageId': 'ami-49e5cb5e',
   u'ImageLocation': '379101102735/debian-jessie-amd64-hvm-2016-11-13-1356-ebs',
   u'ImageType': 'machine',
   u'Name': 'debian-jessie-amd64-hvm-2016-11-13-1356-ebs',
   u'OwnerId': '379101102735',
   u'Public': True,
   u'RootDeviceName': '/dev/xvda',
   u'RootDeviceType': 'ebs',
   u'SriovNetSupport': 'simple',
   u'State': 'available',
   u'VirtualizationType': 'hvm'}],
 'ResponseMetadata': {'HTTPHeaders': {'content-type': 'text/xml;charset=UTF-8',
   'date': 'Mon, 19 Dec 2016 14:03:36 GMT',
   'server': 'AmazonEC2',
   'transfer-encoding': 'chunked',
   'vary': 'Accept-Encoding'},
  'HTTPStatusCode': 200,
  'RequestId': '85a22932-7014-4202-92de-4b5ee6b7f73b',
  'RetryAttempts': 0}}

创建两个系列：

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: [{
  ...
}, {
  ...
}]

第二个y轴不是必需的，但如果系列具有不同的比例，它将非常有用。

示例：https://jsfiddle.net/jv8a1955/

Highcharts多系列动态柱形图更新

1 个答案: