Question

我有点不在我的舒适区，因为我通常做分析而不是花哨的前端。但是，我希望能够对我的一些工作进行实时演示，因此更容易理解，而不仅仅是矩阵中的数字。我环顾四周，找到了一些半相关的东西，并且到目前为止：

（它有四个系列，就像我想要的那样迭代 - 在某种程度上） https://jsfiddle.net/023sre9r/

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

但我完全迷失了如何删除随机数生成器而不丢失视图中数据点数等好处（似乎依赖于for循环？！）。删除额外的标题＆＃34;值＆＃34;就在我真实的Y轴标题旁边。因此，如何每秒从XML文件中获取一个新的数据点。

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

提前致谢！

Answer 1

我简化了您的示例，并添加了清晰的代码，显示如何从服务器获取数据并使用series.addPoint方法将其附加到您的图表。此外，如果您想使用XML，只需将其转换为JS object / 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/

具有单点XML文件的动态更新multible系列Highcharts

1 个答案: