Javascript 使用单点XML文件动态更新多表系列海图

我有点不舒服，因为我通常做分析，不喜欢前端。然而，我想有一个我的一些工作的实时演示，所以它变得更容易理解，而不仅仅是矩阵中的数字。我环顾四周，发现了一些半相关的东西，走了这么远：

（它有我想要的四个系列，并且在某种程度上进行迭代）

但我完全不知道如何删除随机数生成器，而不丢失视图中数据点的数量之类的好东西（似乎取决于for循环？！）。删除真实y轴标题旁边的额外标题“值”。当然，还有如何每秒从XML文件中获取一个新的数据点

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

---

提前谢谢

我简化了您的示例，并添加了清晰的代码，说明如何使用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()
  }]
})

const randomData=（）=>[…数组（12）]
.map（（u，i）=>[new Date（）.getTime（）+i*1000，Math.random（）]
Highcharts.chart（'容器'{
图表：{
renderTo:'容器'，
类型：“样条线”，
背景颜色：空，
动画：Highcharts.svg，//不要在旧IE中设置动画
marginRight:10，
活动：{
负载（）{
常量图表=此
设置间隔（（）=>{
//获取下面的示例（工作示例：https://github.com/stpoa/live-btc-chart/blob/master/app.js)
//window.fetch（'https://api.cryptonator.com/api/ticker/btc-usd）。然后（（回应）=>{
//返回response.json（）
//}）。然后（（数据）=>{
//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)
}
}
},
标题：{
文本：空
},
xAxis：{
键入：“日期时间”，
像素间隔：150
},
亚克斯：[{
标题：{
文字：“温度[°C]”，
差额：30
},
绘图线：[{
值：0，
宽度：1，
颜色：'#808080'
}]
}, {
}],
工具提示：{
格式化程序：函数（）{
返回“+this.series.name+”
+
Highcharts.dateFormat（“%Y-%m-%d%H:%m:%S”，this.x）+“
”+Highcharts.numberFormat（this.Y，4）；
}
},
图例：{
已启用：true
},
出口：{
已启用：false
},
范围选择器：{
已启用：false
},
导航器：{
已启用：false
},
滚动条：{
已启用：false
},
系列：[{
名称：“设定点”，
数据：随机数据（）
}, {
名称：'返回'，
数据：随机数据（）
}, {
名称：'供应'，
数据：随机数据（）
}, {
名称：“输出”，
数据：随机数据（）
}]
})

实例：

与外部数据源一起工作：

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