在highcharts中查看数据表

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

See updated jsfiddle here.