Highcharts 범례 정렬

Question

높은 차트에서 작업하고 있는데, 전설을 다른 스타일로 표시해야한다는 요구 사항이있어 도움없이 5 일 동안 노력했습니다.

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

});