ページにいくつかの AmStockCharts があります。それらは折れ線グラフです。データは MySQL DB から JSON 形式でフェッチされます。ユーザーがグラフのドット (黒丸) をクリックすると、ユーザーがデータを変更して保存できるフォームが表示されます。この場合、チャートを再描画する必要がありますが、これを理解できません。
コードの一部は次のとおりです。
//drawing all charts there are
var chart;
$.getJSON('stats.php', function (data) { // get all data from all stats at once
var i=0;
for (chartData in data) {
i++;
chart = new AmCharts.AmStockChart();
var dataSet = new AmChart.DataSet();
dataSet.dataProvider = chartData;
// etc. etc. here are all the single graph parameters
$('#stats').append('<div id="chartdiv' + i + '"></div>');
chart.write("chartdiv" + i);
}
});
すべてのチャートがうまく描画されます。しかし、ここで2つの問題があります。「チャート」変数は最後に描画されたチャートのみを参照するため、後でアクセスできないという最初の問題。2 番目の問題は、この最後のグラフを再描画しようとしても、結果が得られないことです。
チャートを再描画するために、次のことを試しました。
function chart_redraw(stat) {
$.getJSON('stat.php?redraw=' + stat, function (data) { // get data for one particular stat
var dataSet = new AmCharts.DataSet();
dataSet.dataProvider = data;
...
chart.dataSets = [dataSet];
var stockPanel = new AmChart.StockPanel();
stockPanel.validateData();
chart.panels = [stockPanel];
chart.validateNow();
});
それは何もしませんでした。つまり、チャートは再描画されません。
私ができる唯一のことは、次のようにして、クリックイベントで非表示の入力にチャートdivを保存することです。
function chartClick (event) {
var chartdiv = event.event.target.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.id
$('#chart_n').val(chartdiv);
...
}
次に、それを使用してそのdivからチャートを削除し、その場所に新しいチャートを作成しますが、validateData()よりもはるかに遅くなります。