Highcharts傳奇陣營

Question

我在高圖表上工作，我有要求以不同風格顯示傳奇，我嘗試了5天沒有任何幫助。

LegendText1 LegendSymbol(box) Legendtext2 

請讓我知道是否有人可以幫助我。

Answer 1

您可以爲圖表使用自定義圖例。在配置中禁用圖表的默認圖例。按照您的要求創建圖例項目的標記，並附加這些項目的點擊事件。基本上在傳說中點擊系列visiblility是toggeld，可以很容易地實現如下。

$("legentItemSelector").click(function() { 
          $(this).toggleClass('disabled-legend-item'); 
          var objSeries = chartObject.series[0]; 
          objSeries.visible ? objSeries.hide() : objSeries.show(); 
         }); 

Answer 2

$(function() { 
    var chart; 

    $(document).ready(function() { 

     // Build the chart 
     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
       plotBackgroundColor: null, 
       plotBorderWidth: null, 
       plotShadow: false 
      }, 
      legend: { 
        layout: 'vertical', 
      floating: true, 
      align: 'left', 
      verticalAlign: 'top', 
      x: 10, 
      y: 10, 
      symbolPadding: 20, 
      symbolWidth: 10 
     }, 

      title: { 
       text: 'Browser market shares at a specific website, 2010' 
      }, 
      tooltip: { 
       pointFormat: '{series.name}: <b>{point.percentage}%</b>', 
       percentageDecimals: 1 
      }, 
      plotOptions: { 
       pie: { 
        allowPointSelect: true, 
        cursor: 'pointer', 
        dataLabels: { 
         enabled: false 
        }, 
        showInLegend: true 
       } 
      }, 
      series: [{ 
       type: 'pie', 
       name: 'Browser share', 
       data: [ 
        ['Firefox', 45.0], 
        ['IE',  26.8], 
        { 
         name: 'Chrome', 
         y: 12.8, 
         sliced: true, 
         selected: true 
        }, 
        ['Safari', 8.5], 
        ['Opera',  6.2], 
        ['Others', 0.7] 
       ] 
      }] 
     }); 
    }); 

});