Angular Chart 使用说明,基于angular工程
Angular Chart是基于Chart.js的angular组件,引入项目后直接操作数据即可。
引用方法:
分别将Chart.js、angular-chart.js、angular-chart.css等文件引入工程(angular工程)中(注意引入顺序)。
在app.js中引入‘chart.js’。
创建你的demo的js和html并用路由绑定。
代码:
在demo.js中写入以下代码:
//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'; };
在demo.html中写入以下代码:
<div > <button class="btn btn-primary" ng-click="changeData()">更改数据</button> <canvas chart-labels="labels" chart-legend="true" chart-series="series" chart-click="onClick"> </canvas> </div> <div > <canvas chart-data="dataBar" chart-labels="labelsBar" chart-series="seriesBar"> </canvas> </div> <div > <canvas chart-data="dataDoughnut" chart-labels="labelsDoughnut"> </canvas> </div> <div > <canvas chart-data="dataRadar" chart-labels="labelsRadar"> </canvas> </div> <div > <canvas chart-data="dataPie" chart-labels="labelsPie"> </canvas> </div> <div > <button class="btn btn-primary" ng-click="toggle()">toggle</button> <canvas chart-data="dataDynamic" chart-labels="labelsDynamic" chart-legend="true"> </canvas> </div>
Chart.js