Angular-chart.js 使用说明(基于angular.js工程)
Angular-chart.js是基于Chart.js的angular组件,引入项目后直接操作数据即可。
引用方法:
分别将Chart.js、angular-chart.js、angular-chart.css等文件引入工程(angular工程)中(注意引入顺序)。
在app.js中module中引入‘chart.js’。
创建你的项目的controller和html并用路由绑定。
代码:
在controller中写入以下代码:

- //Line Chart
- $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
- $scope.series = ['Series A', 'Series B'];
- var dataA = [
- [65, 59, 80, 81, 56, 55, 40],
- [28, 48, 40, 19, 86, 27, 90]
- ];
- var dataB = [
- [11, 33, 54, 86, 51, 97, 33],
- [64, 53, 24, 21, 56, 12, 90]
- ];
- $scope.data =dataA;
- $scope.onClick = function (points, evt) {
- $log.debug(points, evt);
- };
- //change data
- $scope.changeData= function () {
- if($scope.data==dataA){
- $scope.data=dataB;
- }else{
- $scope.data=dataA;
- }
- $log.debug('当前的数据更改为:',$scope.data);
- };
- //Bar Chart
- $scope.labelsBar = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
- $scope.seriesBar = ['Series A', 'Series B'];
- $scope.dataBar = [
- [65, 59, 80, 81, 56, 55, 40],
- [28, 48, 40, 19, 86, 27, 90]
- ];
- //Doughnut Chart
- $scope.labelsDoughnut = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
- $scope.dataDoughnut = [300, 500, 100];
- //Radar Chart
- $scope.labelsRadar =["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"];
- $scope.dataRadar = [
- [65, 59, 90, 81, 56, 55, 40],
- [28, 48, 40, 19, 96, 27, 100]
- ];
- //Pie Chart
- $scope.labelsPie = ["Download Sales", "In-Store Sales", "Mail-Order Sales", "Tele Sales", "Corporate Sales"];
- $scope.dataPie = [300, 500, 100, 40, 120];
- //Dynamic Chart
- $scope.labelsDynamic = ["Download Sales", "In-Store Sales", "Mail-Order Sales", "Tele Sales", "Corporate Sales"];
- $scope.dataDynamic = [300, 500, 100, 40, 120];
- $scope.typeDynamic = 'PolarArea';
- $scope.toggle = function () {
- $scope.typeDynamic = $scope.typeDynamic === 'PolarArea' ?
- 'Pie' : 'PolarArea';
- };

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

- <div style="height:300px;width: 700px;margin-bottom: 140px;">
- <button class="btn btn-primary" ng-click="changeData()">更改数据</button>
- <canvas id="line" class="chart chart-line" chart-data="data"
- chart-labels="labels" chart-legend="true" chart-series="series"
- chart-click="onClick">
- </canvas>
- </div>
- <div style="height:300px;width: 700px;margin-bottom: 140px;">
- <canvas id="bar" class="chart chart-bar"
- chart-data="dataBar" chart-labels="labelsBar" chart-series="seriesBar">
- </canvas>
- </div>
- <div style="height:300px;width: 700px;margin-bottom: 140px;">
- <canvas id="doughnut" class="chart chart-doughnut"
- chart-data="dataDoughnut" chart-labels="labelsDoughnut">
- </canvas>
- </div>
- <div style="height:300px;width: 700px;margin-bottom: 140px;">
- <canvas id="radar" class="chart chart-radar"
- chart-data="dataRadar" chart-labels="labelsRadar">
- </canvas>
- </div>
- <div style="height:300px;width: 700px;margin-bottom: 140px;">
- <canvas id="polar-area" class="chart chart-polar-area"
- chart-data="dataPie" chart-labels="labelsPie">
- </canvas>
- </div>
- <div style="height:300px;width: 700px;margin-bottom: 140px;">
- <button class="btn btn-primary" ng-click="toggle()">toggle</button>
- <canvas id="base" class="chart-base" chart-type="typeDynamic"
- chart-data="dataDynamic" chart-labels="labelsDynamic" chart-legend="true">
- </canvas>
- </div>
Angular-chart.js 使用说明(基于angular.js工程)的更多相关文章
- KoaHub.js是基于 Koa.js 平台的 Node.js web 快速开发框架
koahubjs KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架.可以直接在项目里使用 ES6/7(Generator Function, Class, A ...
- js:基于原生js的上啦下啦刷新功能
链接:https://www.jianshu.com/p/a8392115e6f0演示地址:http://wonghan.cn/iscroll-demo/html:<body> <d ...
- Angular Chart 使用说明(基于angular工程)
Angular Chart是基于Chart.js的angular组件,引入项目后直接操作数据即可. 引用方法: 分别将Chart.js.angular-chart.js.angular-char ...
- 基于ANGULAR.JS的下一代WEB应用开发-01-yeoman
Angularjs 个人认为这是一款很好的框架!它将我们从AJAX应用的开发中解救了出来!嗯....废话就说道这里下面我们开始把! 首先我们必须了解一些核心的概念: 客户端模版 MVC 数据绑定 依赖 ...
- angular源码分析:injector.js文件分析——angular中的依赖注入式如何实现的(续)
昨天晚上写完angular源码分析:angular中jqLite的实现--你可以丢掉jQuery了,给今天定了一个题angular源码分析:injector.js文件,以及angular的加载流程,但 ...
- angular 2+ 变化检测系列三(Zone.js在Angular中的应用)
在系列一中,我们提到Zone.js,Zones是一种执行上下文,它允许我们设置钩子函数在我们的异步任务的开始位置和结束位置,Angular正是利用了这一特性从而实现了变更检测. Zones.js非常适 ...
- require.js初试(with angular & optimization)
如果你只是想找一款称手的js加载器,可以参考这篇js loader benchmarks(http://artzstudio.com/files/Boot/test/benchmarks/script ...
- 使用OnPush和immutable.js来提升angular的性能
angular里面变化检测是非常频繁的发生的,如果你像下面这样写代码 <div> {{hello()}} </div> 则每次变化检测都会执行hello函数,如果hello函数 ...
- 我是如何基于angular+requirejs+node做SPA项目架构的
本文章已经录制视频,地址是:http://v.youku.com/v_show/id_XODI3MjYyODI0.html 前端这两年技术飞速发展,各种优秀框架层出不穷.本文不是讨论各框架的比较,也不 ...
随机推荐
- Easy deployment
Use simple ssh and shell scripts to deploy, upgrade, rollback and reconfigure linux servers. https:/ ...
- 【起航计划 032】2015 起航计划 Android APIDemo的魔鬼步伐 31 App->Search->Invoke Search 搜索功能 Search Dialog SearchView SearchRecentSuggestions
Search (搜索)是Android平台的一个核心功能之一,用户可以在手机搜索在线的或是本地的信息.Android平台为所有需要提供搜索或是查询功能的应用提 供了一个统一的Search Framew ...
- 如何将bug杀死在摇篮里?
阿里妹导读:在欧洲中世纪的传说中,有一种叫“人狼”的妖怪,就是人面狼身.它们会讲人话,专在月圆之夜去袭击人类.而且传说中对“人狼”用一般的枪弹是不起作用的,普通子弹都伤不到也打不死它,只有一种用银子作 ...
- raw_input与input的区别
1. 版本差异 raw_input——>python2版本 input——>python3版本 2. 输入格式差异 就是raw_input()随便输都是字符串,而input()必须按照Py ...
- OpenSSL.Net 在生产环境中无法正常加载的原因分析与解决 z
http://blog.csdn.net/wangjia184/article/details/6990098 http://www.openssl.org/ 在本地测试好好的代码部署到生产环境后,遇 ...
- python中的 if __name__ == “__main__”: 有什么用
https://stackoverflow.com/questions/419163/what-does-if-name-main-do# 问题: What does if name == " ...
- March 18 2017 Week 11 Saturday
When you feel like quitting, think about why you started. 当你想放弃时,想想你为什么开始. When I heard of the messa ...
- thrift基本概念和实例
一.thrift可以做什么 thrift是一个跨语言通信的工具,支持的语言多,而且还提供服务器端的众多网络模型,使服务端的开发可以只专于服务本身的逻辑. 二.thrift重要概念 1.processo ...
- gluon实现softmax分类FashionMNIST
from mxnet import gluon,init from mxnet.gluon import loss as gloss,nn from mxnet.gluon import data a ...
- POJ 1190 生日蛋糕 【DFS + 极限剪枝】
题目传送门:http://poj.org/problem?id=1190 参考剪枝:https://blog.csdn.net/nvfumayx/article/details/6653111 生日蛋 ...