使用格式化的AJAX返回值更新Highchart系列数据

Question

我的页面上目前有一个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的“ series：”选项中需要的格式完全相同。 我的PHP返回的系列数取决于选中的复选框数量。

所以，这是我的问题：用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*/ ]

    });
}

但是，当我这样做时，它完全打破了我的图表，并且我一直无法使它正常工作并通过。

任何建议/评论将不胜感激。

Answer 1

我这样做

var chart  = $('#container').highcharts();

if (chart) {
chart.series[0].setData([]);
}

那应该清除图表中的数据。

我只是在我的代码中注意到，我会从头开始为新数据重新创建图表，但我认为这不是必需的。

获得新数据后，请尝试再次使用进行设置

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