如何調用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/