摘要:heightcharts图表自带的图例点击事件是:点击某个显示/隐藏的图例,该图例对应的series就隐藏/显示。产品的需求点击某个图例是想只看该图例对应的数据;于是修改了图例点击事件。实现效果链接
//展示/隐藏的逻辑函数
function getVisibleMode(series, serieName) {
var allVisible = true;
var allHidden = true;
for (let i = 0; i < series.length; i++) {
if (series[i].name == serieName)
continue;
allVisible &= series[i].visible;
allHidden &= (!series[i].visible);
}
if (allVisible && !allHidden)
return 'all-visible';
if (allHidden && !allVisible)
return 'all-hidden';
return 'other-cases';
};
//heightcharts 对应的配置项
plotOptions : {
series: {
events : {
legendItemClick : function(event) {
var series = this.chart.series;
var mode = getVisibleMode(series, this.name);
var enableDefault = false;
if (!this.visible) {
enableDefault = true;
}
else if (mode == 'all-visible') {
series.forEach((serie,k)=>{
serie.hide();
)
this.show();
}
else if (mode == 'all-hidden') {
series.forEach((serie,k)=>{
serie.show();
)
}
else {
enableDefault = true;
}
return enableDefault;
}
}
}
},
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。