ハイチャートグラフを動的に更新するためにajax関数を呼び出す方法は？

Question

私はHighchartsを使って温度と時間のグラフをプロットしています。私はバックエンドからのデータがJSONファイルを更新するJSONファイルを持っています。グラフが時間に対して自動的に生成されるようにajax関数を呼びたいと思います。どうやってするか？私はハイチャートに新しいです、助けてください。

Answer 1

Series.addPointメソッドを使用できます。 http://api.highcharts.com/highcharts/Series.addPoint

次に、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/