自定义图例点击事件
Posted zhao1949
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了自定义图例点击事件相关的知识,希望对你有一定的参考价值。
https://bbs.hcharts.cn/article-109-1.html
*****************************************
图表自带的图例点击事件是:
点击某个显示/隐藏的图例,该图例对应的serie就隐藏/显示。
个人觉得不合理,正常来说,有多条折线(或其他类型的图表),点击某个图例是想只看该图例对应的数据;
于是修改了图例点击事件。
实现的效果是(以折线图为例):
1. 当某条折线隐藏时,点击该折线的图例 --> 该折线显示;
2. 当全部折线都显示时,点击某个图例 --> 该图例对应的折线显示,其他折线均隐藏;
3. 当只有一条折线显示时,点击该折线的图例 --> 全部折线均显示;
4. 其他情况,按默认处理:
显示 --> 隐藏;
隐藏 --> 显示;
贴不了图,实例的效果见下:
P.S.
1. 在多个y轴的混合图中,若不想因为某个图的隐藏而使其轴/网格线/刻度线都随之隐藏的话,可以配置chart的ignoreHiddenSeries属性。
plotOptions : { line : { 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‘) { $.each(series, function(k, serie) { serie.hide(); }); this.show(); } else if (mode == ‘all-hidden‘) { $.each(series, function(k, serie) { serie.show(); }); } else { enableDefault = true; } return enableDefault; } } } },
// 更改 点击series功能. plotOptions : { line : { events : { legendItemClick : function(event) { var editorName = this.name; queryArticlelistByEditor(editorName) //调用清单查询. return false; } } } },
以上是关于自定义图例点击事件的主要内容,如果未能解决你的问题,请参考以下文章