【问题标题】:Angular Pie chart角饼图
【发布时间】:2017-09-28 12:28:24
【问题描述】:

我们可以使用哪个角度包来设计这种饼图?

PIE Chart(打开此饼图模型)

注意:同样需要标签

提前致谢

【问题讨论】:

标签: angular pie-chart


【解决方案1】:

使用 nvd3 库,使用非常简单,易于注入到您的控制器中。

这里有一个例子来理解

app.controller('MainCtrl', function($scope) {
 $scope.options = {
            chart: {
                type: 'pieChart',
                height: 450,
                donut: true,
                x: function(d){return d.key;},
                y: function(d){return d.y;},
                showLabels: true,
                labelsOutside: true,
                pie: {
                    startAngle: function(d) { return d.startAngle/2 -Math.PI/2 },
                    endAngle: function(d) { return d.endAngle/2 -Math.PI/2 }
                },
                duration: 500,
                legend: {
                    margin: {
                        top: 5,
                        right: 70,
                        bottom: 5,
                        left: 0
                    }
                }
            }
        };

        $scope.data = [
            {
                key: "One",
                y: 5
            },
            {
                key: "Two",
                y: 2
            },
            {
                key: "Three",
                y: 9
            },
            {
                key: "Four",
                y: 7
            },
            {
                key: "Five",
                y: 4
            },
            {
                key: "Six",
                y: 3
            },
            {
                key: "Seven",
                y: .5
            }
        ];
});

http://plnkr.co/edit/OlROrZ?p=preview

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-03-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多