[英]Highcharts - How to get the particular chart id on click of custom label in export options
I have an Highchart in which I added a custom label('Show label') in export options.I have also added a click event on it.Now my requirement is, on click of that label I need to get the id(here its 'container') of that particular chart.I tried with jquery also but it was not working.Can anyone please help me.Here is the code. 我有一个Highchart,在导出选项中添加了一个自定义标签(``显示标签'')。我还添加了一个click事件。现在我的要求是,单击该标签时我需要获取id(此处是那个特定图表的``容器'')。我也尝试过使用jquery,但是它不起作用,有人可以帮我吗,这是代码。
<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');
}
You can access the id of the rendered HTML element using the renderTo
method provided by Highchart. 您可以使用Highchart提供的renderTo
方法访问呈现的HTML元素的renderTo
。 Your exporting section should be: 您的导出部分应为:
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']
}
}
}
https://api.highcharts.com/highcharts/chart.renderTo https://api.highcharts.com/highcharts/chart.renderTo
You can pass the event
and context this
into the label click function handler. 您可以通过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'));
}
Updated Code 更新的代码
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'));
}
Working jsFiddle demo - https://jsfiddle.net/sc0Lg4uh/1/ 工作的jsfiddle演示- https://jsfiddle.net/sc0Lg4uh/1/
Check console.log for id of the container. 检查console.log以获取容器的ID。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.