1. 程式人生 > >自定義圖例點擊事件

自定義圖例點擊事件

har cnblogs hid 圖表 func 效果 nbsp ignore option

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

自定義圖例點擊事件