如何在AngularJS中制作饼图

Question

我试图根据控制器中的变量值制作饼图，这是实现这一目标的最简单方法。

Answer 1

您可以使用

1）Angular chart (using Chart.js)

2）angular directives for commonly used d3 charts

3）AngularJS Directive

4）An AngularJS directive for NVD3 re-usable charting library (based on D3).

5）Google Charts also use with AngularJS

我希望这会对你有帮助......

Answer 2

我希望这个答案会对你有所帮助。使用角度图表，您可以制作饼图或任何其他图表

1. Angular Chart

    npm install angular-chart.js --save
   

它只需要2个依赖 angularjs和chartjs

1. Angular nvD3 chart

     { "chart": {
       "type": "pieChart",
       "height": 500,
       "showLabels": true,
       "duration": 500,
       "labelThreshold": 0.01,
       "labelSunbeamLayout": true,
       "legend": {
         "margin": {
            "top": 5,
            "right": 35,
            "bottom": 5,
            "left": 0
     }
   }
   

   } }

Answer 3

您可以将Highchart API与角度js一起使用 的 https://www.npmjs.com/package/angular2-highcharts

你可以使用没有角度js的alos Highchart来绘制饼图 - ＆gt;

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

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

 <script>
Highcharts.chart('container', {
chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie'
},
title: {
    text: 'Browser market shares in January, 2018'
},
tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
    pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
            enabled: true,
            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
            style: {
                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
            }
        }
    }
},
series: [{
    name: 'Brands',
    colorByPoint: true,
    data: [{
        name: 'Chrome',
        y: 61.41,
        sliced: true,
        selected: true
    }, {
        name: 'Internet Explorer',
        y: 11.84
    }, {
        name: 'Firefox',
        y: 10.85
    }, {
        name: 'Edge',
        y: 4.67
    }, {
        name: 'Safari',
        y: 4.18
    }, {
        name: 'Sogou Explorer',
        y: 1.64
    }, {
        name: 'Opera',
        y: 1.6
    }, {
        name: 'QQ',
        y: 1.2
    }, {
        name: 'Other',
        y: 2.61
    }]
}]
});