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工程)的更多相关文章

  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. 21_AOP_Advice增强2(异常、引介)

    [异常抛出增强] 异常抛出异常最适合的应用场景:事务管理. 当参与事务的某个Dao发生异常时,事务管理器就必须回滚事务. [异常抛出增强 例子] [操作数据库的Dao类:PersonDao.java] ...

  2. PHP接口对方(C#)接收不到数据?ContentLength=-1

    工作时遇到的问题.浏览器可以查看到json数据,但是对方死活收不到数据. 最后发现发现ContentLength=-1. 找到问题:为什么.NET程序下载获得的ContentLength=-1? 摘抄 ...

  3. AMOLED原理介紹

    1. OLED发光原理 OLED(Organic Light Emitting Display,有机发光显示器)是指有机半导体材料在电场驱动下,通过载流子注入和复合导致发光的现象.其基本原理是用ITO ...

  4. 【Leetcode】【Easy】Binary Tree Level Order Traversal

    Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to right, ...

  5. 解决未安装unit测试和jest的Vue项目运行karma start时的错误

    一.起因 在#单元测试#以karma+mocha+chai 为测试框架的Vue webpack项目(一)文中,说明了是对已有的Vue项目进行测试框架的搭建,并进行测试.但是此项目在利用 vue-cli ...

  6. PHP腾讯与百度坐标转换

    function coordinate_switch($a,$b){//百度转腾讯坐标转换 $a = Latitude , $b = Longitude $x = (double)$b - 0.006 ...

  7. vue-cli项目接口地址可配置化(多环境部署)一处修改多处适用

    本文档目的在于帮助对vue了解比较少的同学,能够快速配置vue应用中的接口地址.方便项目切换服务环境后,重新修改多组件的http请求地址. 一.前言 我们在上一篇文章分享了vue-cli项目基本搭建( ...

  8. 科技巨头之微软-Microsoft

    提起微软Microsoft,我想应该是无人不知无人不晓.Windows操作系统,Office办公软件,是我们日常经常用到的工具.而微软的创始人正是前世界首富比尔盖茨. 1997年,我刚上初中.当时学校 ...

  9. 最重要的“快捷键” IntelliJ IDEA

    转载:http://www.youmeek.com/intellij-idea-part-iii-hotkeys-explain/ @IntelliJ IDEA第三部分视频教程:最重要的“快捷键”专讲 ...

  10. 对枚举数据类型使用switch