0
次のコードを使用して、ハイチャートの折れ線グラフに3秒ごとに新しいポイントを追加しようとしています。しかし、それは新しいポイントを追加しません。 jsonから戻ってくるポイントが[x、y]のように正しいことを確認しました。 getjsonの部分がなく、[3,4]のような点を使用すると動作します。しかし、jsonを追加すると、jsonに渡すはずの新しいデータは追加されません。highcharts動的にポイントを追加する
var chart; // global
function requestData() {
var series = this.series[0];
$.getJSON('url',
function(point){
// add the point
series.addPoint(point);
// call it again after one second
setInterval(requestData, 3000);
});
}
私がrequestDataをロードする方法は次のとおりです.1つの静的ポイントを追加することで動作します。
chart: {
zoomType: 'x',
events: {
load: requestData
}
機能が繰り返されないか、データを取得していないかの点で彼にデータを入れていないか、addpointが動作しない理由を任意のアイデア?
ロードの代わりにクリックを使用しても問題なく動作しました。定期的な積み込みがうまくいかないようです。
編集:フルチャートコード:
.getJSON('url2',
function(data){
$('#container11').highcharts({
chart: {
zoomType: 'x',
events: {
load: requestData
}
},
title: {
text: ''
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'time',
dateTimeLabelFormats: {
hour: '%H:%M',
}
},
yAxis: {
title: {
text: 'test'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'name',
data: data
}]
});
})。
関数 'requestData'は、ポイントをチャートに追加しますが、' ajaxRequest'の間隔を設定しています。 'setInterval(ajaxRequest、3000); 'は' setTimeout(requestData、3000)でなければなりません。 '。そうでない場合は、完全なコードを投稿すると役立ちます。 'requestData'は内部で' this'コンテキストをどのように取得しますか?この関数はオブジェクトの一部ですか? – Ejaz
ありがとう、私のコードでは 'requestData'ですが、私はちょうどコピーエラーです。私はコードを編集しました。実際には、 'var series = this.series [0];'の代わりに 'series = chart.series [0]'を実行しようとしましたが、静的な追加ポイントを渡しませんでした。私は、この関数がチャートからロードされているので、 'this'がなぜ機能するのかと推測します。フルコードでは残りのチャートコードを意味しますか?私はメインの質問にコードの残りの部分を追加しました – Hans
あなたはHighchartsのドキュメントを見ましたか?ドキュメント内でポイントを動的に追加する方法については、http://www.highcharts.com/docs/working-with-data/live-data –