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.

查看图表中的数据表

1 个答案: