使用格式化的 AJAX 返回更新高图表系列数据


Updating Highchart Series Data with Formatted AJAX Return

我目前在我的页面上有一个Highcharts散点图,其结构如下:

  $(function() {
    $('#container').highcharts({
          /*chart options, etc... this does not change*/
          series: [/*there is some default data here*/]
      });
  });

此图表看起来和工作都很好。此外,我在页面上有几个复选框和一个按钮。按下按钮时,我有一些jQuery,它会查看选中了哪些复选框,并将此信息发送到PHP文件,该文件根据选定的复选框返回新的数据系列。该代码如下所示:

    var Obj = {};
    $('button').click(function(e) {
        var tableIDs = $("#boxes input:checkbox:checked").map(function() {
            return $(this).val();
        }).get();
        var idClicked = e.target.id;
        Obj.tables = tableIDs;
        $.ajax({
            url: 'update.php',
            type: 'post',
            data: {
                "points": JSON.stringify(Obj)
            },
            success: function(data) {
                console.log(data);     /*for testing*/
            }
        });
    });

这段代码位于脚本的最后,在我的 highcharts 函数之外。我已经来回彻底测试了 AJAX,一切正常。PHP 的设置方式,AJAX 返回的格式如下:

{name: 'series1', data: [[...,...],[...,...],...]},
{name: 'series2', data: [[...,...],[...,...],...]}

不是一个数组,只是一个很长的字符串,里面有很多数字(为了清楚起见,我把上面的放在两行上)。换句话说,它的格式完全符合我的Highchart的"系列:"选项中的需要。我的 PHP 返回的系列数根据选中的复选框/数量而变化。

因此,这是我的问题:将已显示在 highchart 上的默认数据替换为 AJAX 返回的新数据的最佳方法是什么?或者,默认数据是可选的,如果它使此操作更容易,则可以将其删除。

有很多类似的问题,但我似乎正在采用其他人的解决方案来解决我的问题。我已经查看了一些直接更新解决方案,例如rockStar和LeJared提出的解决方案,但是我没有运气让他们将旧数据更新为新数据或为此插入任何数据。

我特别喜欢 DemoUser 提出的解决方案,基本上将数据作为变量传递给包装的 highcharts 函数。这通常看起来像:

function my_chart(data) {
    $('#container').highcharts({
        /*chart options, etc... this does not change*/
        series: [ /*there is some default data here*/ ]
    });
}

但是,当我这样做时,它完全破坏了我的图表,我无法正常工作并通过。

任何建议/意见将不胜感激。

我是这样做

var chart  = $('#container').highcharts();
if (chart) {
chart.series[0].setData([]);
}

这应该会从图表中清除数据。

刚刚在我的代码中注意到我从头开始为新数据重新创建图表,但我认为没有必要。

获得新数据后,请尝试使用

chart.series[0].setData([data]);