ハイチャート凡例アライメント

Question

私はハイチャートで作業していますが、別のスタイルで凡例を表示する必要があります。

LegendText1 LegendSymbol(box) Legendtext2 

誰かが私にこれを助けることができる場合は教えてください。

Answer 1

グラフにカスタム凡例を使用できます。設定のチャートのデフォルトの凡例を無効にします。必要に応じて凡例アイテムのマークアップを作成し、それらのアイテムのクリックイベントを添付します。基本的に凡例をクリックすると、以下のように容易に達成できるシリーズの可視性がトグルードされます。

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

});