网站搜索

javascript - 重新绘制 AmStockChart


我在页面上有几个 AmStockCharts。这些是折线图。数据是从 MySQL 数据库以 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);
    }
});

我能画出所有的图表。但接下来有两个问题。第一个问题是我无法在之后访问它们,因为“chart”变量只指向最后绘制的图表。第二个问题是,即使我尝试重新绘制这个最后的图表,也没有结果。

为了重新绘制图表,我尝试了以下方法:

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() 会慢得多。

答案#1

当数据发生变化时,您只需为数据集设置新的数据:

dataSet.dataProvider = yourDataArray;

然后打电话

stockChart.validateData();

然而,你的代码也应该更改面板/数据集,所以对我来说有点奇怪。你有收到任何控制台错误吗?如果没有的话,我需要看看你案例的完整工作源代码,但我希望我的建议能奏效。