自定義圖例點擊事件

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;
                                }
                            }
                            }
                        },