热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

角图表。无法用数据刷新图表-AngularCharts.js:Can'trefreshchartwithdata

Iamnewtochartsangular,anditsbeenalongtimesinceIusedjavascript.Imtryingtouseaf

I am new to charts/angular, and it's been a long time since I used Javascript. I'm trying to use a factory in Angular to grab data from a server and use it to populate a chart (which uses Angular Charts, a wrapper around Charts.js). I can populate it originally with fake data, but changing it at all causes the chart to go blank. Do I have some sort of scoping issue here? Here's the relevant code:

我对图表/角度很陌生,我使用Javascript已经有很长时间了。我正在尝试使用一个具有角度的工厂从服务器获取数据并使用它填充一个图表(使用角图表,一个围绕Charts.js的包装)。我本来可以用假数据填充它,但是更改它会导致图表为空。我这里有什么范围问题吗?相关代码:

 .controller("LineCtrl", ["$scope", "HRDataPointFactory", function ($scope, HRDataPointFactory) {

        //The following lines cause the chart to populate, but obviously I dont care about this fake data.
        //$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
        //$scope.series = ["Series A", "Series B"];
        //$scope.data = [
        //    [65, 59, 80, 81, 56, 55, 40],
        //    [28, 48, 40, 19, 86, 27, 90]
        //];
        $scope.OnClick= function(points, evt) {
            console.log(points, evt);
        };


        $scope.data = [[]];
        $scope.labels = [];
        $scope.series = ["Department"];

        $scope.getData = function() {
            HRDataPointFactory.getData($scope.department, $scope.dt1, $scope.dt2)
                .then(function (data) {

                    var i;
                    for (i = 0; i 

And the html:

html:



Thank you for the help!

谢谢你的帮助!

1 个解决方案

#1


2  

I created a Plunker with a working example. To simplify I only pull the data (not the labels, etc.), but that is easy to complete.

我用一个工作示例创建了一个插入器。为了简化,我只提取数据(而不是标签等),但这很容易完成。

In the controller, we assign vm to this and in the function getData I reference vm.data. Before you had $scope which is a different $scope in the function that the one you assign as a blank array.

在控制器中,我们为它分配vm,在函数getData I中引用vm.data。在您拥有$scope之前,它是函数中的一个不同的$scope,您将其赋值为一个空白数组。

    .controller('MyCtrl', ['$scope', 'HRDataPointFactory', function($scope, HRDataPointFactory) {
      var vm = this;
      //The following lines cause the chart to populate, but obviously I dont care about this fake data.
      vm.labels = ["January", "February", "March", "April", "May", "June", "July"];
      vm.series = ["Series A", "Series B"];
//      vm.data = [
//        [65, 59, 80, 81, 56, 55, 40],
//        [28, 48, 40, 19, 86, 27, 90]
//      ];
      vm.OnClick= function(points, evt) {
        console.log(points, evt);
      };

      vm.data = [
        []
      ];
      vm.getData = function() {
        HRDataPointFactory.getData($scope.department, $scope.dt1, $scope.dt2)
          .then(function(success) {
            console.log(JSON.stringify(success));
            vm.data = success.data;

          });
      }
      vm.getData();

      /*unrelated stuff here*/
    }])

I print in the console the data I receive:

我在控制台打印我收到的数据:

{"data":[[65,59,80,81,56,55,40],[28,48,40,19,86,27,90]],"status":200,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"params":{},"url":"data","headers":{"Accept":"application/json, text/plain, */*"}},"statusText":""}

The data is hosted on plunker too using this as a format:

数据也作为一种格式托管在柱塞上:

[
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
]

Please not that I also used the "Controller as" syntax in the HTML to respect best practices... see john papa's article on this subject.

请不要让我在HTML中使用“Controller as”语法来尊重最佳实践……看看约翰爸爸关于这个问题的文章。

 

Let us know.

让我们知道。


推荐阅读
author-avatar
木桌上的年轮_1
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有