我使用的是HighCharts和堆叠条形图,条形图的每一部分都是可点击的,并触发一个函数来过滤表格中的数据。
标准highcharts hover
功能将不在当前系列中的数据灰显。
我希望灰显图表上的所有其他数据,除了我单击的条形图上的堆栈区域。
下面的插图是我希望实现的。第一张图片显示了所有的栏。第二张图片显示我已经点击了顶部栏的中间部分。我需要所有其他的堆栈/栏变灰(禁用)。
理想情况下,第二次单击将重新启用所有功能。
(请忽略图像2上的悬停工具提示)
我现在可以使用以下方法检测并返回当前单击的堆栈项:
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
console.log('Series Name : ' + this.name + ', Stack Name: ' + this.series.name);
}
}
}
}
在本例中,它将返回Series Name : Estimate, Stack Name: Projects In Progress
1条答案
按热度按时间l5tcr1uw1#
下面是最终的解决方案(根据标准的Highcharts堆叠条形图示例修改而来)。
它允许您点击堆叠条上的任何地方,并保持该数据点的不透明度为1,同时将所有其他系列/点的不透明度降至0.3。
第二次单击该点将使所有点恢复为不透明度1。
这是一把能用的小提琴https://jsfiddle.net/tvg6d5a0/1/