在我的高图表中,当我包含导出选项时,它在上下文菜单中包含数据表。如果我尝试包含 MenuItems ,那么我将失去导出到 excel 和 CSV 的选项。
如何从 Highchart 导出菜单中删除数据表?
Highcharts.chart('container', {
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: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
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: 'Sogou Explorer',
y: 1.64
}, {
name: 'Opera',
y: 1.6
}, {
name: 'QQ',
y: 1.2
}, {
name: 'Other',
y: 2.61
}]
}]
});
<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>
您仍然可以将
menuItems
与 export-data.js
中的额外值一起使用。
带有“数据表”的完整列表是这样的(JSFiddle):
["printChart",
"separator",
"downloadPNG",
"downloadJPEG",
"downloadPDF",
"downloadSVG",
"separator",
"downloadCSV",
"downloadXLS",
"viewData",
"openInCloud"]
只需删除
"viewData"
以及您不需要的任何其他值。
您可以专门从数组中删除它,但这似乎不太理想(JSFiddle):
Highcharts.chart('container', {
// ...
}, function(chart) {
var arr = chart.options.exporting.buttons.contextButton.menuItems;
var index = arr.indexOf("viewData");
if (index !== -1) arr.splice(index, 1);
});