文章/答案/技术大牛

发布

社区首页 >问答首页 >用nvd3和AngualrJs动态创建饼图

问用nvd3和AngualrJs动态创建饼图
EN

Stack Overflow用户

提问于 2014-09-29 09:49:12

回答 1查看 517关注 0票数 0

问题是，

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

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

nvd3.js

javascript

angularjs

d3.js

回答 1

Stack Overflow用户

发布于 2014-09-29 12:14:45

改编自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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/26091489

复制

相似问题

问用nvd3和AngualrJs动态创建饼图
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用nvd3和AngualrJs动态创建饼图EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用nvd3和AngualrJs动态创建饼图
EN