내부 원형이없는 하이 차트 도넛 형 차트?

Question

저는 Highcharts 라이브러리로 가장 간단한 도넛 형 차트를 생성하는 솔루션을 찾고 있습니다. 그러나 하이 차트의 모든 예는 내부 원형과 외부 도넛이있는 차트 스타일을 보여줍니다 (참조)

내부 파이를 없애고 다른 도안과 마찬가지로 외부 도넛을 유지하려면 어떻게해야합니까? (RGraph와 같은 것 : http://www.rgraph.net/examples/donut.html)

고맙습니다.

Answer 1

두 요소 (키/값) 배열의 배열로 데이터를 제공하면됩니다. 도넛 스타일을 얻으려면 innerSize을 지정하십시오.

... 
data: [["Firefox",6],["MSIE",4],["Chrome",7]], 
innerSize: '20%', 
... 

가 여기에 jsFiddle of a complete example입니다 :

그래서 매개 변수는 다음과 같이 포함됩니다.

Answer 2

**I hope this example of highchat will solve your problum 

http://jsfiddle.net/e2qpa/3/ 

$(function() { 
    var chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'pie' 
     }, 

     plotOptions: { 
      pie: { 
       borderColor: '#000000', 
       innerSize: '60%' 
      } 
     }, 
     series: [{ 
      data: [ 
       ['Firefox', 44.2], 
       ['IE7', 26.6], 
       ['IE6', 20], 
       ['Chrome', 3.1], 
       ['Other', 5.4] 
       ]}] 
    }, 
    // using 

    function(chart) { // on complete 

     var xpos = '50%'; 
     var ypos = '53%'; 
     var circleradius = 102; 

    // Render the circle 
    chart.renderer.circle(xpos, ypos, circleradius).attr({ 
     fill: '#ddd', 
    }).add(); 

    // Render the text 
    chart.renderer.text('THIS TEXT <span style="color: red">should be in the center of the donut</span>', 155, 215).css({ 
      width: circleradius*2, 
      color: '#4572A7', 
      fontSize: '16px', 
      textAlign: 'center' 
     }).attr({ 
      // why doesn't zIndex get the text in front of the chart? 
      zIndex: 999 
     }).add(); 
    }); 
}); 

Answer 3

이것은 최고의 검색 결과이며 주어진 답변이 저에게 효과적이지 않았습니다. 배열의 단순한 배열보다 데이터 포인트에 대한 더 많은 제어가 필요했습니다. JSON 객체를 사용하여 특정 데이터에 대한 명시 적 색상과 같은 추가 옵션을 구성해야했습니다. 일부 연구를 통해 데이터 형식을 전혀 수정할 필요가 없음을 발견했습니다. 원형 차트를 도넛 형 차트로 만들려면 데이터 시리즈에서 innerSize 값을 0보다 크게 설정하면됩니다. highcharts 문서에서

:

innerSize : 파이의 내경의 크기입니다. 0보다 큰 크기는 도넛 형 차트를 렌더링합니다. 비율 또는 픽셀 값이 될 수 있습니다. 백분율은 원형 크기를 기준으로합니다. 픽셀 값은 정수로 표시됩니다.

그래서 당신은 다음과 같은 데이터를 간단한 도넛 차트를 얻을 수 있습니다

 series: [{ 
      innerSize: '30%', 
      data: [ 
       {name: 'Yellow Slice', y: 12, color: 'yellow'}, 
       {name: 'Red Slice', y: 10, color: 'red' }, 
       {name: 'Blue Slice', y: 33, color: 'blue'}, 
       {name: 'Green Slice', y: 20, color: 'green'} 
      ] 
     }] 

JS Fiddle