带有单点XML文件的动态更新多行系列Highcharts

我有点出于我的舒适区域，因为我通常做分析而不是花哨的前端。但是，我想对我的一些工作进行实时演示，因此它变得更容易理解，而不仅仅是矩阵中的数字。我环顾四周，发现一些半相关的，走到今天这一步：带有单点XML文件的动态更新多行系列Highcharts

（它有四大系列就像我想和它迭代 - 在一定程度上） https://jsfiddle.net/023sre9r/

var series1 = this.series[0], 
series2 = this.series[1], 
series3 = this.series[2], 
series4 = this.series[3];

但我完全失去了关于如何在不丢失视图中数据点的数量等好东西的情况下移除随机数生成器（似乎取决于for循环？！）。删除我的真实Y轴标题旁边的额外标题“值”。原因是如何每秒从XML文件中获取新的数据点。

理想情况下，我想要一个包含4个值的XML文件，我在MATLAB中每200ms更新一次。每一秒我都希望我的4系列图表能够更新。如果你知道你在做什么，这不是很容易吗？！ :-)

在此先感谢！

来源

2017-02-15 dichaelen

我简化了您的示例并添加了清晰的代码，显示如何从服务器获取数据并使用series.addPoint方法将其附加到图表中。此外，如果你想使用XML，只需将其转换为JS对象/ JSON。

const randomData =() => [...Array(12)] 
    .map((u, i) => [new Date().getTime() + i * 1000, Math.random()]) 

Highcharts.chart('container', { 
    chart: { 
    renderTo: 'container', 
    type: 'spline', 
    backgroundColor: null, 
    animation: Highcharts.svg, // don't animate in old IE 
    marginRight: 10, 
    events: { 
     load() { 
     const chart = this 
     setInterval(() => { 
      // Fetch example below (working example: https://github.com/stpoa/live-btc-chart/blob/master/app.js) 
      // window.fetch('https://api.cryptonator.com/api/ticker/btc-usd').then((response) => { 
      // return response.json() 
      // }).then((data) => { 
      // chart.series[0].addPoint({ x: data.timestamp * 1000, y: Number(data.ticker.price) }) 
      // }) 

      chart.series.forEach((series) => series.addPoint([new Date().getTime(), Math.random()], true, true)) 

     }, 3000) 
     } 
    } 
    }, 
    title: { 
    text: null 
    }, 
    xAxis: { 
    type: 'datetime', 
    tickPixelInterval: 150 
    }, 
    yAxis: [{ 
    title: { 
     text: 'Temperature [°C]', 
      margin: 30 
    }, 
    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: 'Setpoint', 
    data: randomData() 
    }, { 
    name: 'Return', 
    data: randomData() 
    }, { 
    name: 'Supply', 
    data: randomData() 
    }, { 
    name: 'Output', 
    data: randomData() 
    }] 
})

直播例如：https://jsfiddle.net/9gw4ttnt/

工作一个与外部数据源：https://jsfiddle.net/111u7nxs/

来源

2017-02-15 14:35:42 stpoa

带有单点XML文件的动态更新多行系列Highcharts

回答

相关问题