Javascript Highchart 隐藏默认按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10375871/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highchart hide default buttons
提问by Anup Singh
I want to hide default buttons ("Export" & "Print") in highchart export options.
我想在 highchart 导出选项中隐藏默认按钮（“导出”和“打印”）。
you can have demo at http://jsfiddle.net/fXHB5/3496/in this link there are 3 buttons 1. Custom Button 2. Export button 3. print Button.
您可以在http://jsfiddle.net/fXHB5/3496/ 上进行演示，此链接中有 3 个按钮 1. 自定义按钮 2. 导出按钮 3. 打印按钮。
In this case I want to show only first button and hide "Export button" & "print Button"
在这种情况下，我只想显示第一个按钮并隐藏“导出按钮”和“打印按钮”
回答by GGG
you can access each button preference with something like this:
您可以使用以下内容访问每个按钮首选项：
exporting: {
buttons: {
printButton: {
symbol: 'circle'
},
exportButton: {
enabled: false
}
}
}
an expandable example with your custom button would be:
带有自定义按钮的可扩展示例是：
exporting: {
buttons: {
printButton: {
enabled: false
},
exportButton: {
enabled: false
},
custom: {
symbol: 'diamond',
x: -62,
symbolFill: '#B5C9DF',
hoverSymbolFill: '#779ABF',
_titleKey: 'printButtonTitle',
onclick: function () {
alert('click!')
}
}
}
}
回答by Forever Nomad
For anyone else who is using a newer version of highcharts and the selected answer doesn't work, you need to use the below instead to hide the button.
对于使用较新版本 highcharts 并且所选答案不起作用的任何其他人，您需要使用以下内容来隐藏按钮。
exporting: {
buttons: {
contextButton: {
enabled: false
}
}
}
回答by Bill
It's not possible as an option, but you can hide the default buttons then create your own using html. Then you can bind your custom button as you need.
作为一种选择，这是不可能的，但您可以隐藏默认按钮，然后使用 html 创建自己的按钮。然后您可以根据需要绑定您的自定义按钮。
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
credits: {
enabled: false
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}],
exporting: {
enabled: false
}
});
console.log( Highcharts.Renderer.prototype.symbols )?
回答by hitesh kaushik
if you just want to hide default custom buttons,you could simply use:
如果您只想隐藏默认的自定义按钮，您可以简单地使用：
exporting: {
buttons: {
contextButton: {
enabled: false
},
printButton: {
enabled: false,
},
}
}
If you want to use your own custom button or label you can use this:
如果您想使用自己的自定义按钮或标签，您可以使用：
exporting: {
buttons: {
contextButton: {
enabled: false
},
exportButton: {
text: `Chrome`,
_titleKey: "yourKey",
onclick:function(){
alert('clicked Chrome');
},
x:-410
},
printButton: {
enabled: false,
text: `IE: `,
_titleKey:"myKey",
onclick: function () {
alert('clicked IE');
},
x:-400,
y:30
},
}
},
in this i have disabled default as well as printButton, you can use x and y to set the positions of the label. You can find my code in fiddle here : https://jsfiddle.net/m3yegczx/20/
在此我禁用了默认值和打印按钮，您可以使用 x 和 y 来设置标签的位置。你可以在这里找到我的小提琴代码：https: //jsfiddle.net/m3yegczx/20/
回答by kalpesh
If you are using a framework then you can hide by this way.
如果您使用的是框架，那么您可以通过这种方式隐藏。
HIOptions *options = [[HIOptions alloc]init];
HIExporting *exporting = [[HIExporting alloc]init];
exporting.enabled = [[NSNumber alloc] initWithBool:false];
options.exporting = exporting;
回答by qxg
As for current highcharts (7.2.1), you can hide them by setting option below
对于当前的 highcharts (7.2.1)，您可以通过设置下面的选项来隐藏它们
exporting: {
buttons: {
contextButton: {
menuItems: ["downloadPNG", "downloadJPEG", "downloadPDF", "downloadSVG"]
}
}
}
Check API at https://api.highcharts.com/highcharts/exporting.buttons.contextButton.menuItems
在https://api.highcharts.com/highcharts/exporting.buttons.contextButton.menuItems检查 API
