Question

我有一个页面，其中有一些基于不同项目任务状态的项目统计信息。在这个页面上，我使用AJAX来更新我的Stat值。

我现在正在尝试集成Highcharts条形图/图表，我需要更新它;当我的数据发生变化时，需要更新图表。

这里有一个JSFiddle显示我正在试验的图表http://jsfiddle.net/jasondavis/9dr345og/1/

$(function () {
    $('#container').highcharts({
        data: {
            table: document.getElementById('datatable')
        },
        chart: {
            type: 'column'
        },
        title: {
            text: 'Project Stats'
        },
        yAxis: {
            allowDecimals: false,
            title: {
                text: 'Total'
            }
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                    this.point.y + ' ' + this.point.name.toLowerCase();
            }
        },
        subtitle: {
          enabled: true,
          text: 'Project Stats'
        },
        legend: {
          enabled: false
        },
        exporting: {
          enabled: false
        },
        credits: {
          enabled: false
        }

    });


    // Button Click to Simulate my Data updating.  This increments the Completed Tasks bar by 1 on each click.
    $(".update").click(function() {
        var completedVal = $('#completed').text();
        ++completedVal
        $('#completed').text(completedVal)
    }); 

});

所以这个例子是从表中获取数据，但我不必使用这个方法，如果需要，我也可以用JavaScript设置它。

我只需要弄清楚如何动态更新所有这些值，因为我的真实实时页面使用AJAX更新我的任务统计值，所以我希望此图表也可以实时更新。

有关如何更新的任何帮助？运行我的AJAX代码时，如果有一个重建图表的函数，我可以在那时调用一些JavaScript吗？

Answer 1

我会放弃使用该表，特别是因为看起来你正在构建它只是为了让highcharts使用它。而是通过AJAX将数据作为Highcharts series object返回。然后使用Series.setData方法更新您的绘图。这将是正确的方式。

如果你真的想使用这个表，你可以查询数据并仍然使用setData（这就是Highcharts为你做的事情）。更新了fiddle。

$(".update").click(function() {
    var completedVal = $('#completed').text();
    ++completedVal;
    $('#completed').text(completedVal);
    // get y values
    var yValues = $.map($('#datatable tr td'),function(i){return parseFloat($(i).text());});
    // set data
    Highcharts.charts[0].series[0].setData(yValues);    
});

当AJAX在我的页面上更新我的数据时更新HighCharts图表

1 个答案: