首页 > 代码库 > 自定义图例点击事件

自定义图例点击事件

2024-10-10 00:33:02   213人阅读

https://bbs.hcharts.cn/article-109-1.html

*****************************************

图表自带的图例点击事件是：

点击某个显示/隐藏的图例，该图例对应的serie就隐藏/显示。
个人觉得不合理，正常来说，有多条折线(或其他类型的图表)，点击某个图例是想只看该图例对应的数据；
于是修改了图例点击事件。
 
实现的效果是(以折线图为例)：
1. 当某条折线隐藏时，点击该折线的图例 --> 该折线显示；
2. 当全部折线都显示时，点击某个图例 --> 该图例对应的折线显示，其他折线均隐藏；
3. 当只有一条折线显示时，点击该折线的图例 --> 全部折线均显示；
4. 其他情况，按默认处理：
显示 --> 隐藏；
隐藏 --> 显示；
 
贴不了图，实例的效果见下：
Customized legengItemClick Event
 
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;
                                }
                            }
                            }
                        },

 

 

自定义图例点击事件


联系
我们