我在图 1 中有用户位置的饼图表示,我已经成功地使该表示正常工作,但我如何才能使其余用户当单击任何特定扇区时隐藏为图 2?
图 1:
图 2:
Javascript:
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'users location'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Africa', 45.0],
['Asia', 26.8],
{
name: 'Australia',
y: 12.8,
sliced: true,
selected: true
},
['Europe', 8.5],
['North America', 6.2],
['Others', 0.7]
]
}]
});
});
最佳答案
您可以使用 plotOptions.series.point.events.click
函数来告诉图表在单击切片后确切做什么:
series: {
point: {
events: {
click: function () {
var index = this.x;
$('.highcharts-series-group g path').toggle();
$('.highcharts-series-group g path:nth-child(' + (index+1) + ')').toggle();
$('.highcharts-data-labels path').toggle();
$('.highcharts-data-labels path:nth-child(' + (index+1) + ')').toggle();
$('.highcharts-data-labels g').toggle();
$($('.highcharts-data-labels g').get(index)).toggle();
}
}
}
}
前两个开关用于切片本身。 $('.highcharts-series-group g path')
指的是图表中所有的彩色切片,我通过添加改回了刚刚点击的一个用户>:nth-child
.
第二对开关用于连接 datalabels 的切片中的线条。第三对用于数据标签。
这是 DEMO .
关于javascript - 如何在用户单击饼图时隐藏其余区域?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30542294/