Angular-chart.js是基于Chart.js的angular组件,引入项目后直接操作数据即可。

引用方法:

   分别将Chart.js、angular-chart.js、angular-chart.css等文件引入工程(angular工程)中(注意引入顺序)。

在app.js中module中引入‘chart.js’。

创建你的项目的controller和html并用路由绑定。

  代码:

在controller中写入以下代码:

  1. //Line Chart
  2. $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
  3. $scope.series = ['Series A', 'Series B'];
  4.  
  5. var dataA = [
  6. [65, 59, 80, 81, 56, 55, 40],
  7. [28, 48, 40, 19, 86, 27, 90]
  8. ];
  9. var dataB = [
  10. [11, 33, 54, 86, 51, 97, 33],
  11. [64, 53, 24, 21, 56, 12, 90]
  12. ];
  13. $scope.data =dataA;
  14. $scope.onClick = function (points, evt) {
  15. $log.debug(points, evt);
  16. };
  17.  
  18. //change data
  19. $scope.changeData= function () {
  20. if($scope.data==dataA){
  21. $scope.data=dataB;
  22. }else{
  23. $scope.data=dataA;
  24. }
  25. $log.debug('当前的数据更改为:',$scope.data);
  26. };
  27.  
  28. //Bar Chart
  29. $scope.labelsBar = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  30. $scope.seriesBar = ['Series A', 'Series B'];
  31.  
  32. $scope.dataBar = [
  33. [65, 59, 80, 81, 56, 55, 40],
  34. [28, 48, 40, 19, 86, 27, 90]
  35. ];
  36.  
  37. //Doughnut Chart
  38. $scope.labelsDoughnut = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
  39. $scope.dataDoughnut = [300, 500, 100];
  40.  
  41. //Radar Chart
  42. $scope.labelsRadar =["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"];
  43.  
  44. $scope.dataRadar = [
  45. [65, 59, 90, 81, 56, 55, 40],
  46. [28, 48, 40, 19, 96, 27, 100]
  47. ];
  48.  
  49. //Pie Chart
  50. $scope.labelsPie = ["Download Sales", "In-Store Sales", "Mail-Order Sales", "Tele Sales", "Corporate Sales"];
  51. $scope.dataPie = [300, 500, 100, 40, 120];
  52.  
  53. //Dynamic Chart
  54. $scope.labelsDynamic = ["Download Sales", "In-Store Sales", "Mail-Order Sales", "Tele Sales", "Corporate Sales"];
  55. $scope.dataDynamic = [300, 500, 100, 40, 120];
  56. $scope.typeDynamic = 'PolarArea';
  57.  
  58. $scope.toggle = function () {
  59. $scope.typeDynamic = $scope.typeDynamic === 'PolarArea' ?
  60. 'Pie' : 'PolarArea';
  61. };

在相应的html中写入以下代码:

  1. <div style="height:300px;width: 700px;margin-bottom: 140px;">
  2. <button class="btn btn-primary" ng-click="changeData()">更改数据</button>
  3. <canvas id="line" class="chart chart-line" chart-data="data"
  4. chart-labels="labels" chart-legend="true" chart-series="series"
  5. chart-click="onClick">
  6. </canvas>
  7. </div>
  8.  
  9. <div style="height:300px;width: 700px;margin-bottom: 140px;">
  10. <canvas id="bar" class="chart chart-bar"
  11. chart-data="dataBar" chart-labels="labelsBar" chart-series="seriesBar">
  12. </canvas>
  13. </div>
  14.  
  15. <div style="height:300px;width: 700px;margin-bottom: 140px;">
  16. <canvas id="doughnut" class="chart chart-doughnut"
  17. chart-data="dataDoughnut" chart-labels="labelsDoughnut">
  18. </canvas>
  19. </div>
  20.  
  21. <div style="height:300px;width: 700px;margin-bottom: 140px;">
  22. <canvas id="radar" class="chart chart-radar"
  23. chart-data="dataRadar" chart-labels="labelsRadar">
  24. </canvas>
  25. </div>
  26.  
  27. <div style="height:300px;width: 700px;margin-bottom: 140px;">
  28. <canvas id="polar-area" class="chart chart-polar-area"
  29. chart-data="dataPie" chart-labels="labelsPie">
  30. </canvas>
  31. </div>
  32.  
  33. <div style="height:300px;width: 700px;margin-bottom: 140px;">
  34. <button class="btn btn-primary" ng-click="toggle()">toggle</button>
  35. <canvas id="base" class="chart-base" chart-type="typeDynamic"
  36. chart-data="dataDynamic" chart-labels="labelsDynamic" chart-legend="true">
  37. </canvas>
  38. </div>

Angular-chart.js 使用说明(基于angular.js工程)的更多相关文章

  1. KoaHub.js是基于 Koa.js 平台的 Node.js web 快速开发框架

    koahubjs KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架.可以直接在项目里使用 ES6/7(Generator Function, Class, A ...

  2. js:基于原生js的上啦下啦刷新功能

    链接:https://www.jianshu.com/p/a8392115e6f0演示地址:http://wonghan.cn/iscroll-demo/html:<body> <d ...

  3. Angular Chart 使用说明(基于angular工程)

    Angular Chart是基于Chart.js的angular组件,引入项目后直接操作数据即可. 引用方法:    分别将Chart.js.angular-chart.js.angular-char ...

  4. 基于ANGULAR.JS的下一代WEB应用开发-01-yeoman

    Angularjs 个人认为这是一款很好的框架!它将我们从AJAX应用的开发中解救了出来!嗯....废话就说道这里下面我们开始把! 首先我们必须了解一些核心的概念: 客户端模版 MVC 数据绑定 依赖 ...

  5. angular源码分析:injector.js文件分析——angular中的依赖注入式如何实现的(续)

    昨天晚上写完angular源码分析:angular中jqLite的实现--你可以丢掉jQuery了,给今天定了一个题angular源码分析:injector.js文件,以及angular的加载流程,但 ...

  6. angular 2+ 变化检测系列三(Zone.js在Angular中的应用)

    在系列一中,我们提到Zone.js,Zones是一种执行上下文,它允许我们设置钩子函数在我们的异步任务的开始位置和结束位置,Angular正是利用了这一特性从而实现了变更检测. Zones.js非常适 ...

  7. require.js初试(with angular & optimization)

    如果你只是想找一款称手的js加载器,可以参考这篇js loader benchmarks(http://artzstudio.com/files/Boot/test/benchmarks/script ...

  8. 使用OnPush和immutable.js来提升angular的性能

    angular里面变化检测是非常频繁的发生的,如果你像下面这样写代码 <div> {{hello()}} </div> 则每次变化检测都会执行hello函数,如果hello函数 ...

  9. 我是如何基于angular+requirejs+node做SPA项目架构的

    本文章已经录制视频,地址是:http://v.youku.com/v_show/id_XODI3MjYyODI0.html 前端这两年技术飞速发展,各种优秀框架层出不穷.本文不是讨论各框架的比较,也不 ...

随机推荐

  1. Easy deployment

    Use simple ssh and shell scripts to deploy, upgrade, rollback and reconfigure linux servers. https:/ ...

  2. 【起航计划 032】2015 起航计划 Android APIDemo的魔鬼步伐 31 App->Search->Invoke Search 搜索功能 Search Dialog SearchView SearchRecentSuggestions

    Search (搜索)是Android平台的一个核心功能之一,用户可以在手机搜索在线的或是本地的信息.Android平台为所有需要提供搜索或是查询功能的应用提 供了一个统一的Search Framew ...

  3. 如何将bug杀死在摇篮里?

    阿里妹导读:在欧洲中世纪的传说中,有一种叫“人狼”的妖怪,就是人面狼身.它们会讲人话,专在月圆之夜去袭击人类.而且传说中对“人狼”用一般的枪弹是不起作用的,普通子弹都伤不到也打不死它,只有一种用银子作 ...

  4. raw_input与input的区别

    1. 版本差异 raw_input——>python2版本 input——>python3版本 2. 输入格式差异 就是raw_input()随便输都是字符串,而input()必须按照Py ...

  5. OpenSSL.Net 在生产环境中无法正常加载的原因分析与解决 z

    http://blog.csdn.net/wangjia184/article/details/6990098 http://www.openssl.org/ 在本地测试好好的代码部署到生产环境后,遇 ...

  6. python中的 if __name__ == “__main__”: 有什么用

    https://stackoverflow.com/questions/419163/what-does-if-name-main-do# 问题: What does if name == " ...

  7. March 18 2017 Week 11 Saturday

    When you feel like quitting, think about why you started. 当你想放弃时,想想你为什么开始. When I heard of the messa ...

  8. thrift基本概念和实例

    一.thrift可以做什么 thrift是一个跨语言通信的工具,支持的语言多,而且还提供服务器端的众多网络模型,使服务端的开发可以只专于服务本身的逻辑. 二.thrift重要概念 1.processo ...

  9. gluon实现softmax分类FashionMNIST

    from mxnet import gluon,init from mxnet.gluon import loss as gloss,nn from mxnet.gluon import data a ...

  10. POJ 1190 生日蛋糕 【DFS + 极限剪枝】

    题目传送门:http://poj.org/problem?id=1190 参考剪枝:https://blog.csdn.net/nvfumayx/article/details/6653111 生日蛋 ...