2016-07-07 68 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