Highcharts-如何在导出选项中单击自定义标签时获取特定的图表ID
[英]Highcharts - How to get the particular chart id on click of custom label in export options
问题描述
我有一个Highchart，在导出选项中添加了一个自定义标签（``显示标签''）。我还添加了一个click事件。现在我的要求是，单击该标签时我需要获取id（此处是那个特定图表的``容器''）。我也尝试过使用jquery，但是它不起作用，有人可以帮我吗，这是代码。
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
</head>
<body>
<div id="container"></div>
脚本
Highcharts.chart('container', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
exporting: {
menuItemDefinitions: {
// Custom definition
label: {
onclick: function () {
func();
this.renderer.label(
'You just clicked a custom menu item',
100,
100
)
},
text: 'Show label'
}
},
buttons: {
contextButton: {
menuItems: ['downloadPNG', 'downloadSVG', 'separator', 'label']
}
}
},
series: [{
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
function func(){
alert('Hello');
}
2 个解决方案
解决方案1
1 2018-11-13 17:53:19
您可以使用Highchart提供的renderTo方法访问呈现的HTML元素的renderTo 。 您的导出部分应为：
exporting: {
menuItemDefinitions: {
// Custom definition
label: {
onclick: function () {
chartId = this.renderTo.id
alert(chartId)
this.renderer.label(
'You just clicked a custom menu item',
100,
100
)
},
text: 'Show label'
}
},
buttons: {
contextButton: {
menuItems: ['downloadPNG', 'downloadSVG', 'separator', 'label']
}
}
}
文档
解决方案2
0 已采纳 2018-11-13 17:45:14
您可以通过event和上下文this在标签点击功能的处理程序。
label: {
onclick: function (event) {
func(event,this);
this.renderer.label(
'You just clicked a custom menu item',
100,
100
)
},
text: 'Show label'
}
function func(event,context){
console.log("chart id => ",context.renderTo.getAttribute('id'));
}
更新的代码
Highcharts.chart('container', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
exporting: {
menuItemDefinitions: {
// Custom definition
label: {
onclick: function (event) {
func(event,this);
this.renderer.label(
'You just clicked a custom menu item',
100,
100
)
},
text: 'Show label'
}
},
buttons: {
contextButton: {
menuItems: ['downloadPNG', 'downloadSVG', 'separator', 'label']
}
}
},
series: [{
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
function func(event,context){
console.log("chart id => ",context.renderTo.getAttribute('id'));
}
工作的jsfiddle演示- https://jsfiddle.net/sc0Lg4uh/1/
检查console.log以获取容器的ID。
如何在Highcharts饼图中获取字体真棒图标的数据标签？
[英]How can I get a data label in my Highcharts Pie Chart that is a font-awesome icon?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.