シリーズの非表示/表示を停止しますが、灰色の凡例をクリックすると表示されます

Question

私はHighchartsのStacked Column Chartで作業しています。私は凡例をクリックすると、凡例がデフォルトでは灰色になりますが、シリーズ/スタックは隠されておらず同じ色のままであるべきであるという要件があります。

私はこれを試してみましたが、これを使用して隠して停止するようにシリーズを得た：

events: { 
    legendItemClick: function() { 
     return false; // <== returning false will cancel the default action 
    } 
} 

しかし、私はクリックされた伝説の灰色または無効にすることはできませんよ。ここで

はあなたがlegendItemClickをoverirdeする必要がFiddle Link

Answer 1

です。色を追加し、要件に応じてトグルするだけです。

は、トグル機能をjsfiddle here

1を作業参照Highcharts.Legend.prototype.setItemEventsコア機能を上書きhere

$(function() { 
    var selected = null; 
    $('#container').highcharts({ 
     chart: { 
      type: 'column' 
     }, 
     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }, 

     plotOptions: { 
      series: { 

        events: { 
         legendItemClick: function(event) { 
         event.preventDefault() 
        var series = $('#container').highcharts().series[0]; 
        series.color = "#fbfbfbf"; $('#container').highcharts().legend.colorizeItem(series, series.visible); 
        $.each(series.data, function(i, point) { 
       point.graphic.attr({ 
        fill: '#fbfbfb' 
       }); 
       }); 
       series.redraw();   

          this.update({ color: '#999' }, true, false); 
          selected = this; 
          }, 
       mouseOver: function() {  
        if(this != selected) 
        this.update({ color: '#999' }, true,false); 
       } 
        } 

      } 
     }, 

     series: [{ 
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
     }] 
    }); 

}); 

Answer 2

あるエレガントな解決策であると思われます。

mouseoverとmouseoutイベントを処理するコードを削除しました。

(function(H) { 

    Highcharts.Legend.prototype.setItemEvents = function(item, legendItem, useHTML) { 
    // Set the events on the item group, or in case of useHTML, the item itself (#1249) 
    (useHTML ? legendItem : item.legendGroup).on('click', function(event) { 
     if (item.clicked) { 
     legendItem.css({ 
      fill: 'black' 
     }); 
     } else { 
     legendItem.css({ 
      fill: 'gray' 
     }); 
     } 

     item.clicked = !item.clicked; 
    }); 
    }; 

})(Highcharts); 

ライブデモ：コア機能を上書きについて http://jsfiddle.net/kkulig/kje28s4v/

ドキュメント参照：https://www.highcharts.com/docs/extending-highcharts/extending-highcharts