我需要添加具有向下钻取功能的 SolidGauge - HighCharts。 我无法添加仪表的向下钻取。所以我尝试通过调用脚本函数来加载div
<div id="YTDSolidGauge" onload="drawGaugeChart();" onclick="drawBarChart(this);" ></div>
<div id="YTDBar" onclick="drawGaugeChart();"></div>
并在条形图的函数中触发函数,
events:{
click: function(){
alert('test');
drawGaugeChart();
}
}
当我在仪表中编写onload函数时,图表已经消失了。 我希望首先加载仪表,当我们单击它时,应该加载栏。 当我们单击条形图时,它应该返回到仪表。 或者我们可以重新加载特定的 div 来加载另一个 div。 我有很多图表,所以最好通过函数调用,而不是在正文中编写“onload”函数。
最佳答案
您需要捕获 series.point.events 中的点击事件,销毁图表并创建新图表(条形图)。然后添加单击事件并调用 destroy/init。
var barOptions,
solidOptions;
barOptions = {
chart:{
type: 'bar'
},
series:[{
data:[1,2,3]
}],
plotOptions: {
series: {
point: {
events: {
click: function() {
var chart = this.series.chart;
chart.destroy();
Highcharts.chart('container', solidOptions);
}
}
}
}
},
}
solidOptions = {
chart: {
type: 'solidgauge'
},
legend: {
enabled: false
},
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
plotOptions: {
series: {
point: {
events: {
click: function() {
var chart = this.series.chart;
chart.destroy();
Highcharts.chart('container', barOptions);
}
}
}
}
},
tooltip: {
enabled: false
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33,
}]
}]
};
Highcharts.chart('container', solidOptions);
演示:
关于javascript - 将实体图深入到 2 系列条形图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44561119/