javascript - 如何更新数据变化高图表上的数据表

Question

我有一个饼图，我使用下面的代码在按钮单击时动态更新。

在按钮上单击

   $("#myChart").highcharts().series[0].setData($.extend(true, [], data1)) 

我正在使用键来填充数据表。

 keys: ['Count','Value'],

这工作正常并更新图表，但我还在导出菜单中启用了导出数据表，但该数据表没有更新。它在所有连续的按钮点击中保持不变。

如何通过单击按钮来更新数据表以显示新数据的数据。

这是一个小提琴，但它并没有真正使用按钮，只是为了让您了解我的图表：https ://jsfiddle.net/mewohraz/1/

更新：下面的解决方案有效，但我不得不注释掉我用来切换 viewData 表的这段代码。如果您再次单击 viewData，它允许我关闭表格。如何使用 chart.viewData() 来处理它？

Highcharts.Chart.prototype.viewData = function () {
    if (!this.insertedTable) {
        var div = document.createElement('div');
        div.className = 'highcharts-data-table';
        // Insert after the chart container
        this.renderTo.parentNode.insertBefore(div, this.renderTo.nextSibling);
        div.innerHTML = this.getTable();
        this.insertedTable = true;
        div.id = this.container.id + '-data-table';
    }
    else {
        $('#' + this.container.id + '-data-table').toggle();
    }
};

标签： javascripthighcharts

Answer 1

您需要调用viewData内部方法来刷新数据表：

$('#update').on('click', function() {
    var data1 = [...];

    chart.series[0].setData(data1);
    chart.viewData();
});

现场演示：https ://jsfiddle.net/BlackLabel/ahowu9tm/