Question

问题，

我有一个带来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动态地处理价值？

欢迎任何建议。请帮忙

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

使用AngularJs中的nvd3动态创建饼图

1 个答案: