如何使用动态数据创建AngularJS图表 |
您所在的位置：网站首页 › 建立数据图表 › 如何使用动态数据创建AngularJS图表 |
|
嗨我正在尝试一个显示政治推文情绪的网页.我正在尝试为情绪统计创建一个图表.我正在使用Zingchart,我能够创建静态数据,但我无法创建动态数据. 这是我用于插入带有数组chartdata的静态数据的代码. 静态饼图 它工作正常,但我想使用来自angularjs的数据而不是静态值.例如:我试图做这样的事情,但它不起作用 如何从角度控制器获取promise数组数据中的数据？ 这是我的政治家 - 控制者: angular.module('myapp') .controller('PoliticianController', function($scope, PoliticianData, Politician, searchService, utilService) { var politicianData = new Politician(PoliticianData); politicianData.$promise.then(function (result) { $scope.politicianData = result; }); $scope.myJson = { globals: { shadow: false, fontFamily: "Verdana", fontWeight: "100" }, type: "pie", backgroundColor: "#fff", legend: { layout: "x5", position: "50%", borderColor: "transparent", marker: { borderRadius: 10, borderColor: "transparent" } }, tooltip: { text: "%v requests" }, plot: { refAngle: "-90", borderWidth: "0px", valueBox: { placement: "in", text: "%npv %", fontSize: "15px", textAlpha: 1, } }, series: [{ text: "Positive", backgroundColor: "#FA6E6E", }, { text: "Negative", backgroundColor: "#D2D6DE" }, { text: "Neutral", backgroundColor: "#28C2D1" }] }; });这是politician.html页面 {{politician.first_name}} {{politician.last_name}} {{politicianData.stats.total}} {{politicianData.stats.twitter.total}} {{politicianData.stats.rss.total}} {{politicianData.stats.total_negative}} {{politicianData.stats.total_positive}} {{politicianData.stats.total_neutral}}
PoliticianData.stats.total_positive正确显示计数,我想使用相同的数据作为输入值到我的图表.我怎么做？ 1> nardecky..： 完全披露,我是ZingChart团队的成员. 您正在寻找的这个确切功能是数据绑定.我们在angularjs-charts页面上有关于图表数据绑定元素的文档. 在您的情况下,有几个步骤需要实现您想要的.我的第一个建议是在ng-init中从视图中取出不必要的控制器逻辑,并将其保存在指令中.只是一个建议,没有必要.为了这个答案,我的格式将保留控制器内的大部分内容. HTML: 应用逻辑: var app = angular.module('myApp',['zingchart-angularjs']); app.controller('MainController', function($scope, $timeout) { // mimick your promise (function(){ $scope.data = {}; $scope.data.valuesOne= [1,2,3,4,5]; $scope.data.valuesTwo = [1,2,3,4,5]; $scope.aValues = [$scope.data.valuesOne,$scope.data.valuesTwo]; })(); $scope.myJson = { type : "bar", title:{ backgroundColor : "transparent", fontColor :"black", text : "Hello world" }, backgroundColor : "white", series : [ { backgroundColor : '#00baf2' }, { backgroundColor : '#4caf4f' } ] }; // automatically wraps code in $apply $timeout(function(){ // wont reflect changes in aValues because its an object $scope.data.valuesOne= [5]; // must force the reflection of the changes $scope.aValues = [$scope.data.valuesOne, $scope.data.valuesTwo]; // will reflect changes with one line, not the above two lines //$scope.aValues[0] = [5]; },1500); });您可以看到我设置了$ timeout以反映1.5秒后的图形更改.这个$ timeout是模仿数据库更新中的某种对象更改.有两种方法可以更新值,但要了解为什么我们必须首先了解有关ZingChart Angular指令的更多信息. 您必须zc-values在HTML中使用,而不仅仅是zc-json因为代码具有深度相等的监视zc-values功能$watchCollection(). "$ watchCollection()函数是上面两个$ watch()配置之间的中间位置.它比vanilla $ watch()函数更深入;但是,它并不像深度那样昂贵 - 等于$ watch()函数.与$ watch()函数一样,$ watchCollection()通过比较物理对象引用来工作;但是,与$ watch()函数不同,$ watchCollection()深入一级并执行对集合中顶级项目进行额外的浅层参考检查." - 在这里引用. 这就是为什么当我更改aValues数组中的引用时它只能在我的示例中工作. 您可以看到$ timeout内有两种方法来更新图表的值.因为你有一个数组数组,所以对内部数组的更改不会被反映,因为它们是深层对象属性.您可以看到更新单个数组必须强制分配回父级以反映更改.直接更改父级将更新引用,并将反映一行中的更改. Codepen演示在这里. 更多Angular/ZingChart链接 角度页面 ZingChart Codepen |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |