Angular Chart 簡介
在之前的文章中介紹了使用 Ionic 開發跨平台（iOS & Android）應用中遇到的一些問題的解決方案。
在更新0.1.3版本的過程中遇到了需要使用圖表展示一周搜索引擎抓取變化的需求，因為之前使用過 Chart.js, 所以去查了些資料果然是有既有的模塊的。
Angular Chart 就是基於 Chart.js 以及 Angular 構件的圖標展示組件。
Angular Chart 的使用
分別下載 Chart.js 和 Angular Chart，下載后在項目中添加 angular-chart.min.js 和 Chart.min.js 以及 angular-chart.css。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 6 <title></title> 7 8 <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 9 <link href="css/style.css" rel="stylesheet"> 10 <link href="css/angular-chart.min.css" rel="stylesheet"> 11 12 <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above 13 <link href="css/ionic.app.css" rel="stylesheet"> 14 --> 15 16 <!-- ionic/angularjs js --> 17 <script src="lib/ionic/js/ionic.bundle.js"></script> 18 <script src="js/JPushPlugin.js"></script> 19 20 <script src="js/ng-cordova.min.js"></script> 21 <!-- cordova script (this will be a 404 during development) --> 22 <script src="cordova.js"></script> 23 24 <!-- your app's js --> 25 <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script> 26 <script src="js/app.js"></script> 27 <script src="js/controllers.js"></script> 28 <script src="js/services.js"></script> 29 30 <script src="js/Chart.min.js"></script> 31 <script src="js/angular-chart.min.js"></script> 32 </head> 33 <body ng-app="starter"> 34 <ion-nav-bar> 35 </ion-nav-bar> 36 <ion-nav-view></ion-nav-view> 37 </body> 38 </html>
添加應用后需要在 app.js 中添加模塊包含。
angular.module('starter', ['ionic', 'chart.js'])
數據的提供主要為 x 軸線和 y 軸的數據以及數據項的名稱。
x 軸：chart-labels，數組
y 軸：chart-data，多維數組
數據項的名稱：chart-series，數組
這些數據源可以在對於的 controller 中設置，如：
1 $scope.labels = ["January", "February", "March", "April", "May", "June", "July"]; 2 $scope.series = ['Series A', 'Series B']; 3 $scope.data = [ 4 [65, 59, 80, 81, 56, 55, 40], 5 [28, 48, 40, 19, 86, 27, 90] 6 ];
如果有多個圖標，可以在 repeater 中進行綁定也可，如：
1 <div class="item item-divider"> 2 一周收錄變化 3 </div> 4 <div class="item item-text-wrap"> 5 <canvas id="line" class="chart chart-line" data="site.ChartData" chart-labels="site.ChartLabels" legend="true" series="series" options="{showTooltips: true}"></canvas> 6 </div>
而 option 的控制和 Chart js 的 options 是一樣的。
如控制不顯示 tooltip，則通過 options="{showTooltips: false}" 進行控制。
發布打包后發現在 iOS 中性能表現完全滿足，在 Android 中的性能表現比 iOS 差很多，不過這也算是 Ionic 平台的缺陷了。
項目開源地址
iOS 版本：https://itunes.apple.com/cn/app/gu-gu-jian-kong-zhuan-zhu/id1042192962?l=en&mt=8
Android 版本：http://www.wandoujia.com/apps/com.gugujiankong.iosapp