Javascript 在highcharts中查看数据表

如何从另一个按钮切换high charts中的数据表，而不是从high charts中的导出选项，当我单击它一次时，它应该显示图表下方的数据表。我再次单击它，它应该隐藏数据表，并且我有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>

切换数据表
函数toggleDataTable（）{
var chart=$（“#容器”）.highcharts（）
chart.update({
出口：{
可展示：正确
}
});
}
Highcharts.chart（'容器'{
出口：假，
图表：{
plotBackgroundColor:null，
plotBorderWidth:null，
影子：错，
键入：“馅饼”
},
标题：{
文字：“2018年1月浏览器市场份额”
},
工具提示：{
pointFormat:“{series.name}:{point.percentage:.1f}%”
},
打印选项：{
馅饼：{
allowPointSelect:true，
光标：“指针”，
数据标签：{
已启用：false
},
showInLegend：对
}
},
系列：[{
名称：'品牌'，
colorByPoint：对，
数据：[{
名称：“Chrome”，
y:61.41，
切碎：是的，
所选：真
}, {
名称：“Internet Explorer”，
y:11.84
}, {
名称：“Firefox”，
y:10.85
}, {
名称：'边缘'，
y:4.67
}, {
名称：“Safari”，
y:4.18
}, {
名称：'其他'，
y:7.05
}]
}]
});

有关参考信息，请浏览以下链接：

---

首先，

showTable

是

导出

选项中的一个属性。您不能设置

导出：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);
    }

---

您好，谢谢您的回复我如何才能取消显示datatable@Gnana我刚刚更新了答案。请参阅jsfiddle:）