Как обновить таблицу данных на старшей диаграмме изменения данных

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();
    }
};

Answer 1

Вам необходимо вызвать viewData внутренний метод для обновления таблицы данных:

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

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

Демонстрационная версия: https://jsfiddle.net/BlackLabel/ahowu9tm/