하이 차트 - 파이 차트의 범례를 두 열로 표시합니다.

저는 하이 차트 (v2.1.9)를 사용하여 파이 차트를 생성했습니다. 차트는 꽤 잘 생성되지만 전설을 표시 할 때 몇 가지 문제가 있습니다.하이 차트 - 파이 차트의 범례를 두 열로 표시합니다.

범례는 세로보기로 표시되지만 모든 범례 항목이 표시되는 대신 일부는 숨겨집니다. 나는 이것이 컨테이너 내에 들어 가지 않는 다른 범례 항목들을 모두 자동으로 탐색하는 탐색 옵션 때문이라고 생각합니다.

나머지 범례 항목을 페이징하는 대신 두 번째 열에 첫 번째 열과 나란히 표시하려고합니다.

이 데이터는 동적이므로 범례 항목/파이 섹터 수가 시간이 지남에 따라 변경 될 수 있습니다. 섹터가 증가하면 솔루션에서 두 개 이상의 열을 처리 할 수 있어야합니다.

내비게이션 옵션을 해제하는 한 가지 방법은 useHTML: true 옵션을 사용하는 것이지만 원하는 방식으로 스타일을 지정할 수는 없다고 생각합니다. http://jsfiddle.net/7fb3x9ys/

$(function() { 

    $(document).ready(function() { 

     // Build the chart 
     $('#container').highcharts({ 

         chart: { 
           plotBackgroundColor: null, 
           plotBorderWidth: null, 
           plotShadow: false, 
           borderWidth: 0, 
           width: 800, 
           height: 280 
          }, 
          credits: { 
           enabled: false 
          }, 
          legend: { 
           borderWidth: 0, 
           labelFormatter: function() { 
            var total = 0, percentage; 


             $.each(this.series.data, function() { 
             total+=this.y; 
             }); 
             percentage=((this.y/total)*100).toFixed(2); 
             return '<span style="color:#000000,font-size:12px !important;"><b>'+ this.name + '</b></span><br/><span style="color:#000000,font-size:12px !important;">'+percentage+'%</span>'; 
           },     
           verticalAlign: 'middle', 
           x:185, 
           y:0, 
           layout: 'vertical', 
           width: 600, 
           height:280, 
           itemWidth: 600, 
           symbolWidth: 7, 
           symbolHeight: 28 

          }, 
          title: { 
           text: '' 
          }, 
          tooltip: { 
           pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
          }, 
          plotOptions: { 
           pie: { 
            allowPointSelect: true, 
            cursor: 'pointer', 
            size: 275, 
            center: ["16%", "50%"], 
            dataLabels: { 
             enabled: false, 
            }, 
            showInLegend: true, 
            minSize: 130, 
            colors: [ 
            '#7DA0B0', 
            '#9264AA', 
            '#4F2A72', 
            '#9A3968', 
            '#BF5269', 
            '#E16553', 
            '#E3985E', 
            '#E4BF80', 
            '#75C494', 
            '#52584B' 
           ] 
           } 
          }, 
          series: [{ 
           type: 'pie', 
           name: 'Sector', 
           data:{"data":[["ENERGY",17.4],["FINANCIALS",15.1],["CONSUMER STAPLES",14.9],["UTILITIES",14.88],["MATERIALS",7.59],["REAL ESTATE",7.24],["TELECOMMUNICATION SERVICES",7.08],["CONSUMER DISCRETIONARY",6.95],["INDUSTRIALS",5.28],["HEALTH CARE",2.64],["CASH",0.95]]}.data 
          }] 


     }); 
    }); 

});

내가 사전에 모든 응답을 감사드립니다 : 여기

는 바이올린입니다. 나는 며칠 동안 이것에 붙어 있었고 어떤 도움이라도 대단히 감사 할 것입니다.

출처

2014-10-06 ATD

난 당신이, 당신의 자신을 만드는 대신 기본 범례를 사용하지 않는 것이, 그리고한다고 생각합니다 단지 [예] 같은 (http://jsfiddle.net/N3KAC/1/). –

응답 해 주셔서 감사합니다. 그러나 실제로 PhantomJS로 실행되는 highcharts-convert.js에 자체 JavaScript 파일을 입력하여 서버 측 차트를 렌더링하고 있습니다. CSS를 사용하여 div를 만들고 스타일을 지정할 수 있습니까? – ATD

아니, 불가능합니다. 서버 내보내기는 SVG에서만 작동합니다. height/maxHeight 및 다른 레이아웃으로 작업 할 수 있습니다. –

범례를 수평으로 배치하고 itemWidth을 80보다 큰 값으로 설정할 수 있습니다. 저에게는 효과적이었습니다.

예 :

legend: { 
    itemWidth: 80 
}

출처

2015-03-25 12:22:16

하이 차트 - 파이 차트의 범례를 두 열로 표시합니다.

답변

관련 문제