使用 nvd3 和 AngularJs 动态创建饼图答案

【问题标题】：Creating Pie Chart Dynamically with nvd3 and AngualrJs使用 nvd3 和 AngularJs 动态创建饼图
【发布时间】：2014-09-29 01:49:11
【问题描述】：

问题，

我有一个带来 Key 和 Value 的 API，我想用它来绘制饼图，但到目前为止还没有运气。

这个我试过了，

 $scope.collectedData=

            [ {
                key:keys,
                y: 541
            }];


        $scope.xFunction = function () {
            return function (d) {
                return d.key;
            };
        };

        $scope.yFunction = function(){
            return function (d) {
                return d.y;
            };
        }

HTML 文件

<nvd3-pie-chart
                data="collectedData"
                id="toolTipExample1{{$index}}"
                width="550"
                height="350"
                x="xFunction()"
                y="yFunction()"tooltips="true">
        </nvd3-pie-chart>

这将绘制饼图，因为值已定义。但是如何从 API 动态处理值？

欢迎提出任何建议。请帮忙

【问题讨论】：

标签： javascript angularjs d3.js nvd3.js

【解决方案1】：

改编自http://demos.telerik.com/kendo-ui/radar-charts/angular的代码示例

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <link href="styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="styles/kendo.dataviz.default.min.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/angular.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>
<body>
    <div id="example" ng-app="KendoDemos">
    <div ng-controller="MyCtrl">
    <div class="demo-section k-content">
        <div class="box-col" style="width: 500px;">
            <h4>Hover some series</h4>
            <div kendo-chart
                 k-title="{ text: '1024x768 screen resolution trends for 2009', position: 'bottom' }"
                 k-series-defaults="{ type: 'pie' }"
                 k-series="[{
                                field: 'share',
                                categoryField: 'resolution',
                                padding: 0
                              }]"
                 k-data-source="screenResolution"
                 k-series-hover="onSeriesHover"
                 ></div>
        </div>
        <div class="box-col">
            <h4>Console</h4>
            <div class="console"></div>
        </div>
    </div>

    </div>
<script>
    angular.module("KendoDemos", [ "kendo.directives" ]);
    function MyCtrl($scope) {
        $scope.onSeriesHover = function(e) {
            kendoConsole.log(kendo.format("event :: seriesHover ({0} : {1})", e.category, e.value));
        };

        $scope.screenResolution = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "../content/dataviz/js/screen_resolution.json",
                    dataType: "json"
                }
            },
            filter: {
                field: "year",
                operator: "eq",
                value: 2009
            }
        });
    }
</script>
</div>


</body>
</html>

【讨论】：