javascript - 在 highcharts 中查看数据表

Question

我如何从另一个按钮而不是从 Highcharts 中的导出选项切换 Highcharts 中的数据表，当我点击它一次它应该再次显示图表下方的数据表我点击它应该隐藏数据表，我有 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 时手动删除 table 元素:

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

See updated jsfiddle here.