Посмотреть таблицу данных в старших чартах

Question

как я могу переключать таблицу данных в верхних диаграммах с другой кнопки, а не из параметров экспорта в верхних диаграммах, когда я нажимаю на нее один раз, чтобы она снова показала таблицу данных под диаграммой, я нажала на нее, чтобы скрытьтаблица данных, и у меня есть N число графиков, поэтому он должен быть динамическим для всех графиков

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<button onclick="toggleDataTable()">
Toggle Datatable
</button>
<script>
    function toggleDataTable(){
        var chart= $('#container').highcharts()
        chart.update({
                exporting: {
                    showTable: true
                }
            });
    }

Highcharts.chart('container', {
exporting:false,
chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie'
},
title: {
    text: 'Browser market shares in January, 2018'
},
tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
    pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
            enabled: false
        },
        showInLegend: true
    }
},
series: [{
    name: 'Brands',
    colorByPoint: true,
    data: [{
        name: 'Chrome',
        y: 61.41,
        sliced: true,
        selected: true
    }, {
        name: 'Internet Explorer',
        y: 11.84
    }, {
        name: 'Firefox',
        y: 10.85
    }, {
        name: 'Edge',
        y: 4.67
    }, {
        name: 'Safari',
        y: 4.18
    }, {
        name: 'Other',
        y: 7.05
    }]
}]
});

</script>

для справки перейдите по этой ссылке:

https://jsfiddle.net/GnanaSagar/roL5mhu1/6/

Answer 1

Во-первых, showTable - это атрибут из опций exporting.Вы не можете установить exporting: false тогда.Вы должны установить это так, если вы не хотите видеть кнопку экспорта в правом верхнем углу:

  exporting: {
    enabled: false
  },

Тогда для функции onclick вам, вероятно, следует использовать что-то вроде:

  function toggleDataTable() {
    var chart = $('#container').highcharts()
    chart.update({
      exporting: {
        showTable: !chart.options.exporting.showTable
      }
    });
  }

Но он не удаляет таблицу после щелчка назад.Поэтому я предлагаю вам вручную удалить элемент таблицы, когда chart.options.exporting.showTable переходит от true к false:

if (chart.options.exporting.showTable) {
      var element = document.getElementById("highcharts-data-table-0");
      element.parentNode.removeChild(element);
    }

См. Обновленный jsfiddle здесь.