Javascript 使用nvd3和AngualrJs动态创建饼图_Javascript_Angularjs_D3.js_Nvd3.js

Javascript 使用nvd3和AngualrJs动态创建饼图

javascript angularjs d3.js

Javascript 使用nvd3和AngualrJs动态创建饼图,javascript,angularjs,d3.js,nvd3.js,Javascript,Angularjs,D3.js,Nvd3.js,问题, 我有一个API，它带来了关键和价值，使用它我想画饼图，但到目前为止没有运气这个我已经试过了 $scope.collectedData= [ { key:keys, y: 541 }]; $scope.xFunction = function () { return function (d) { r

问题,

我有一个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的值呢

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

代码示例改编自

<!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>