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] 
       ] 
      }] 
     }); 
    }); 

});