У меня есть круговая диаграмма, которую я обновляю динамически при нажатии кнопки, используя приведенный ниже код.

При нажатии кнопки

   $("#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();
    }
};
0
Caesar Tex 7 Мар 2019 в 01:17

1 ответ

Лучший ответ

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

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

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

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

2
ppotaczek 7 Мар 2019 в 07:47