highcharts報表關於series點擊文本或者符號,都有觸發事件或者都沒有觸發事件

1:Highcharts點擊legend symbol切換並沒改變圖的可視狀態,如何實現符號或文本都觸發?
 通過看源碼我們發現,series事件只是針對標題項進行click事件處理,而圖列legendSymbol並沒有做click事件處理,
我們知道highcharts.js源碼中是通過series中的標題事件來控制報表顯示/隱藏效果。
源碼中添加的有legendItem的click事件,但是legendSymbol圖列沒有click事件.
    .on('click', function(event) {
      var strLegendItemClick = 'legendItemClick',
      fnLegendItemClick = function() {
      item.setVisible();
    };
如果要實現圖列和標題一樣的事件,我們有2個方案,一般開發我們會考慮到改源碼,但是如果其他地方使用的話就會導致類似的效果,但是可能它不需要這樣的效果,怎麼辦?這時我們可以在我們的應用中加入如下代碼信息即可:
var chart;
$(document).ready(function() {

    //...報表應用

    //在chart的每個serie上監聽click
    $(chart.series).each(function(i){
        chart.series[i].legendSymbol.on('click',function(e){ //legend上click事件
        $(chart.series[i].legendItem.element).trigger('click'); // trigger click event on element
        });
    });

});
即:讓圖列的click事件觸發採用標題的click觸發事件

2:屏蔽series中圖標和標題的觸發改變圖的可視狀態?
屏蔽series圖列和標題的click事件我們需要在我們的應用尾部添加如下代碼實現.
var chart;
$(document).ready(function() {

    //...報表應用

  $(chart.series).each(function(i){ //屏蔽series標題click事件
      chart.series[i].legendItem.on('click',function(e){ //legendItem上click事件
          $(chart.series[i].legendItem.element).trigger(''); // trigger click event on element
      });
  });

  $(chart.series).each(function(i){ //屏蔽圖列click事件
      chart.series[i].legendSymbol.on('click',function(e){ //legendItem上click事件
          $(chart.series[i].legendItem.element).trigger(''); // trigger click event on element
      });
  });

});


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章