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.