Hightchart-ng를 사용하여 Highcharts 반원형 도넛 형 차트를 만드는 방법

Question

각도 응용 프로그램에 Highcharts 반원형 도넛 형 차트를 만들려고합니다. Highcharts-ng 지시문을 설치했습니다. 어떤 이유로 든 plotOptions 섹션을 완전히 건너 뛸 것으로 보이며 시작 각도와 끝 각도가 설정되어 도넛을 만듭니다. 내가 얻은 것은 원형 원형 차트입니다. 내가 여기 JSFiddle을 만든

<div ng-app="myapp"> 
    <div ng-controller="myctrl"> 
     <highchart id="chart1" config="highchartsNG"></highchart> 
    </div> 
</div> 

    //See: https://github.com/pablojim/highcharts-ng 
var myapp = angular.module('myapp', ["highcharts-ng"]); 

myapp.controller('myctrl', function ($scope) { 

    $scope.options = { 
     type: 'pie', 
     colors: ['#971a31', '#ffffff'] 
    } 

    $scope.swapChartType = function() { 
     if (this.highchartsNG.options.chart.type === 'line') { 
      this.highchartsNG.options.chart.type = 'bar' 
     } else { 
      this.highchartsNG.options.chart.type = 'line' 
     } 
    } 

    $scope.highchartsNG = { 
     options: { 
      colors: ['#971a31', '#ffffff'], 
      chart: { 
       type: 'pie', 
       backgroundColor: '#f1f1f2', 
       height: 150 
      } 
     }, 
     series: [{ 
      data: [10, 15, 12, 8, 7] 
     }], 
     chart: { 
      plotBackgroundColor: null, 
      plotBorderWidth: 0, 
      plotShadow: false 
     }, 
     title: { 
      text: 'Hello', 
      style: { 
       color: '#971a31', 
       fontWEight: 'bold', 
       fontSize: '15px' 
      }, 
      verticvalAlign: 'middle', 
      y: 20, 
      x: -24 
     }, 
     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
     }, 
     plotOptions: { 
      pie: { 
       borderColor: '#000000', 
       size: 115, 
       dataLabels: { 
        enabled: false, 
        distance: -50, 
        style: { 
         fontWeight: 'bold', 
         color: 'white', 
         textShadow: '0px 1px 2px black', 

        } 

       }, 
       startAngle: -90, 
       endAngle: 90, 
       center: ['30%', '75%'] 
      } 
     }, 
     series: [{ 
      type: 'pie', 
      name: 'Loan', 
      innerSize: '50%', 
      data: [ 
       ['85% paid', 85], 
       ['15% owed', 15] 

      ] 
     }], 
     loading: false 
    } 

}); 

: 나는 무엇을 놓치고

http://jsfiddle.net/mikemahony/hzdewsx8/

여기 내 코드는?

Answer 1

Highcharts-ng 지시문은 옵션에서 사용할 속성이 필요합니다.

$scope.highchartsNG = { 
    options:{ 
     plotOptions: { 
      pie: { 
       dataLabels: { 
        enabled: true, 
        distance: -50, 
        style: { 
         fontWeight: 'bold', 
         color: 'white', 
         textShadow: '0px 1px 2px black' 
        } 
       }, 
       startAngle: -90, 
       endAngle: 90, 
       center: ['50%', '75%'] 
      } 
     } 
    }, 

highchartsNGConfig에서 options 속성은 표준 highcharts 옵션 개체입니다. 예 : `새로운 Highcharts.Chart (옵션);에 전달할 수있는 모든 것; 여기에서 일합니다.

이 옵션 개체는 변경 사항을 감시합니다. 여기서 무언가가 바뀌면 전체 차트가 다시 만들어집니다.