如何调用ajax函数来动态更新Highcharts图？

Question

我正在使用 Highcharts 绘制温度与时间的关系图。我有一个 JSON 文件，其中来自后端的数据不断更新 JSON 文件。我想调用 ajax 函数，以便图形根据时间自动生成。怎么做？我是高图表新手，请帮助我。

Answer 1

您可以使用 Series.addPoint 方法。 http://api.highcharts.com/highcharts/Series.addPoint

这是一个使用 Highcharts 和 GET HTTP 请求的实时数据示例。

const options = {
  chart: {
    type: 'spline'
  },
  title: {
    text: 'Live Bitcoin Price'
  },
  xAxis: {
    type: 'datetime'
  },
  yAxis: {
    title: {
      text: 'Price (USD)'
    }
  },
  legend: {
    enabled: false
  },
  exporting: {
    enabled: false
  },
  series: [{
    name: 'Live Bitcoint Price [USD]',
    data: []
  }]
}
const chart = Highcharts.chart('container', options)

// Data
const getData = () => {
  setInterval(() => {
    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) })
    })
  }, 3000)
}
getData()

@import 'https://code.highcharts.com/css/highcharts.css';
.highcharts-background {
  fill: #222;
}

.highcharts-title,
.highcharts-axis-title {
  fill: #DDD;
}

.highcharts-credits,
.highcharts-credits:hover {
  fill: #222;
}
body {
  background-color: #222;
  margin 0 !important;
}
#container {
  margin: 0;
  padding: 0;
  border: 0;
  background-color: #222;
  min-height: 400px;
  height:95%;
  width:95%;
  position:absolute;
}

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

现场示例： https://jsfiddle.net/xpfkx91w/