热门标签 | 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.

让我们知道。


推荐阅读
  • 本文介绍了如何通过掌握 IScroll 技巧来实现流畅的上拉加载和下拉刷新功能。首先,需要按正确的顺序引入相关文件:1. Zepto;2. iScroll.js;3. scroll-probe.js。此外,还提供了完整的代码示例,可在 GitHub 仓库中查看。通过这些步骤,开发者可以轻松实现高效、流畅的滚动效果,提升用户体验。 ... [详细]
  • 在Java中,匿名函数作为一种无名的函数结构,无法独立调用;而在JavaScript中,不仅有类似的匿名函数,还有立即执行函数(IIFE)和闭包等高级特性。立即执行函数同样基于匿名函数实现,但会在定义时立即执行,而闭包则通过嵌套函数来捕获外部变量,实现数据封装和持久化。这些不同的函数形式在实际开发中各有应用场景,理解其特点有助于更好地利用语言特性进行编程。 ... [详细]
  • MVVM架构~mvc,mvp,mvvm大话开篇
    返回目录百度百科的定义:MVP是从经典的模式MVC演变而来,它们的基本思想有相通的地方:ControllerPresenter负责逻辑的处理,Model提供数据,View负责显示。作为一种新的模 ... [详细]
  • 本文作为“实现简易版Spring系列”的第五篇,继前文深入探讨了Spring框架的核心技术之一——控制反转(IoC)之后,将重点转向另一个关键技术——面向切面编程(AOP)。对于使用Spring框架进行开发的开发者来说,AOP是一个不可或缺的概念。了解AOP的背景及其基本原理,对于掌握这一技术至关重要。本文将通过具体示例,详细解析AOP的实现机制,帮助读者更好地理解和应用这一技术。 ... [详细]
  • 本文详细解析了如何使用 jQuery 实现一个在浏览器地址栏运行的射击游戏。通过源代码分析,展示了关键的 JavaScript 技术和实现方法,并提供了在线演示链接供读者参考。此外,还介绍了如何在 Visual Studio Code 中进行开发和调试,为开发者提供了实用的技巧和建议。 ... [详细]
  • 本项目在Java Maven框架下,利用POI库实现了Excel数据的高效导入与导出功能。通过优化数据处理流程,提升了数据操作的性能和稳定性。项目已发布至GitHub,当前最新版本为0.0.5。该项目不仅适用于小型应用,也可扩展用于大型企业级系统,提供了灵活的数据管理解决方案。GitHub地址:https://github.com/83945105/holygrail,Maven坐标:`com.github.83945105:holygrail:0.0.5`。 ... [详细]
  • 微信支付授权目录配置详解及操作步骤
    在使用微信支付时,若通过WeixinJSBridge.invoke方法调用支付功能,可能会遇到“当前页面URL未注册”的错误提示,导致get_brand_wcpay_request:fail调用微信JSAPI支付失败。为解决这一问题,需要正确配置微信支付授权目录,确保支付页面的URL已成功注册。本文将详细介绍微信支付授权目录的配置步骤和注意事项,帮助开发者顺利完成支付功能的集成与调试。 ... [详细]
  • 本题库精选了Java核心知识点的练习题,旨在帮助学习者巩固和检验对Java理论基础的掌握。其中,选择题部分涵盖了访问控制权限等关键概念,例如,Java语言中仅允许子类或同一包内的类访问的访问权限为protected。此外,题库还包括其他重要知识点,如异常处理、多线程、集合框架等,全面覆盖Java编程的核心内容。 ... [详细]
  • 深入解析:JavaScript中的表达式与语句有何不同
    深入解析:JavaScript中的表达式与语句有何不同 ... [详细]
  • 当前,众多初创企业对全栈工程师的需求日益增长,但市场中却存在大量所谓的“伪全栈工程师”,尤其是那些仅掌握了Node.js技能的前端开发人员。本文旨在深入探讨全栈工程师在现代技术生态中的真实角色与价值,澄清对这一角色的误解,并强调真正的全栈工程师应具备全面的技术栈和综合解决问题的能力。 ... [详细]
  • 探索JavaScript倒计时功能的三种高效实现方法及代码示例 ... [详细]
  • 本文将详细介绍在Android应用中添加自定义返回按钮的方法,帮助开发者更好地理解和实现这一功能。通过具体的代码示例和步骤说明,本文旨在为初学者提供清晰的指导,确保他们在开发过程中能够顺利集成返回按钮,提升用户体验。 ... [详细]
  • 如何在Java中高效构建WebService
    本文介绍了如何利用XFire框架在Java中高效构建WebService。XFire是一个轻量级、高性能的Java SOAP框架,能够简化WebService的开发流程。通过结合MyEclipse集成开发环境,开发者可以更便捷地进行项目配置和代码编写,从而提高开发效率。此外,文章还详细探讨了XFire的关键特性和最佳实践,为读者提供了实用的参考。 ... [详细]
  • 题目描述:小K不幸被LL邪教洗脑,洗脑程度之深使他决定彻底脱离这个邪教。在最终离开前,他计划再进行一次亚瑟王游戏。作为最后一战,他希望这次游戏能够尽善尽美。众所周知,亚瑟王游戏的结果很大程度上取决于运气,但通过合理的策略和算法优化,可以提高获胜的概率。本文将详细解析洛谷P3239 [HNOI2015] 亚瑟王问题,并提供具体的算法实现方法,帮助读者更好地理解和应用相关技术。 ... [详细]
  • 本文深入探讨了IO复用技术的原理与实现,重点分析了其在解决C10K问题中的关键作用。IO复用技术允许单个进程同时管理多个IO对象,如文件、套接字和管道等,通过系统调用如`select`、`poll`和`epoll`,高效地处理大量并发连接。文章详细介绍了这些技术的工作机制,并结合实际案例,展示了它们在高并发场景下的应用效果。 ... [详细]
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社区 版权所有