>

Highcharts 라이브러리를 사용하여 가장 간단한 도넛 형 차트를 생성하는 솔루션을 찾고있었습니다. 그러나 Highcharts의 모든 예에는 내부 파이와 외부 도넛이 모두 포함 된 차트 스타일이 표시됩니다 ( http : //www.highcharts.com/demo/pie-donut )

다른 라이브러리와 마찬가지로 내부 파이를 제거하고 외부 도넛을 유지하는 방법은 무엇입니까? (RGraph와 같은 것 : http://www.rgraph.net/examples/donut.html)

감사합니다.


  • 답변 # 1

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

    매개 변수에는 다음과 같은 내용이 포함됩니다 :

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

    다음은 완전한 예제의 jsFiddle입니다.

  • 답변 # 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();
        });
    });
    
    

  • 답변 # 3

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

    하이 차트 문서에서 :

    와이즈 비즈

    다음과 같은 데이터로 간단한 도넛 형 차트를 얻을 수 있습니다 :

    innerSize: The size of the inner diameter for the pie. A size greater than 0 renders a donut chart. Can be a percentage or pixel value. Percentages are relative to the pie size. Pixel values are given as integers.

    JS 피들

    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'} ] }]

관련 자료

  • 이전 angular - `[(ngModel)]`vs`[(value)]`
  • 다음 Maven plugin in Eclipse - eclipse의 maven 플러그인 - settingsxml 파일이 없습니다