2016-07-07 64 views
1

我想創建使用角JS的甜甜圈高圖。如何創建使用角JS的甜甜圈高圖使用角JS的

的JavaScript是 -

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      plotBackgroundColor: null, 
      plotBorderWidth: 0, 
      plotShadow: false 
     }, 
     title: { 
      text: 'Browser<br>shares<br>2015', 
      align: 'center', 
      verticalAlign: 'middle', 
      y: 40 
     }, 
     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
     }, 
     plotOptions: { 
      pie: { 
       dataLabels: { 
        enabled: true, 
        distance: -50, 
        style: { 
         fontWeight: 'bold', 
         color: 'white', 
         textShadow: '0px 1px 2px black' 
        } 
       }, 
       startAngle: -180, 
       endAngle: 180, 
       center: ['50%', '55%'] 
      } 
     }, 
     series: [{ 
      type: 'pie', 
      name: 'Browser share', 
      innerSize: '50%', 
      data: [ 
       ['Firefox', 10.38], 
       ['IE',  56.33], 
       ['Chrome', 24.03], 
       ['Safari', 4.77], 
       ['Opera',  0.91], 
       { 
        name: 'Proprietary or Undetectable', 
        y: 0.9, 
        dataLabels: { 
         enabled: false 
        } 
       } 
      ] 
     }] 
    }); 
}); 

HTML是 -

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div> 

,我包括這些腳本文件 -

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
    <script src="https://code.highcharts.com/highcharts.js"></script> 
    <script src="https://code.highcharts.com/modules/exporting.js"></script> 

我將如何轉換上面的腳本角JS。誰可以幫我這個事? 我認爲需要創建一些指令功能。我是新來的角度定製指令,任何人都可以幫助我們如何做到這一點角度爲甜甜圈高圖?

+0

如何使用[highcharts-ng](https://github.com/pablojim/highcharts-ng)? –

+1

highcharts-ng正在爲我工​​作。 – Aanchal

回答

1

無需將角度轉換成高度圖,因爲它已經存在。不需要注入依賴關係。你可以直接使用它。只需要注入高圖 文件

<script src="script/chart/highcharts.js"></script> 
<script src="script/chart/highcharts-more.js"></script> 
<script src="script/chart/drilldown.js"></script> 
<script src="script/chart/highcharts-3d.js"></script> 
<script src="script/chart/exporting.js"></script> 

根據需要。並在控制器中直接使用Highcharts.chart({// code goes here})。這裏是鏈接for donut highchart