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

Update HighCharts chart when AJAX Updates my data on my page

本文关键字：更新 数据 HighCharts AJAX      更新时间：2023-09-26

我有一个页面，其中有一些基于不同项目任务状态的项目状态。在这个页面上，我使用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？

我会放弃使用该表，尤其是因为它看起来只是为了使用highcharts而构建的。相反，通过AJAX将数据作为highcharts系列对象返回。然后使用Series.setData方法更新绘图。这将是正确的方式。

如果你真的想使用这个表，你可以查询出数据，然后仍然使用setData（这就是Highcharts在幕后为你做的）。更新的小提琴。

$(".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);    
});
相关文章：