Ionic中使用Chart.js进行图表展示以及在iOS/Android中的性能差异

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 html2html3head4metacharsetutf-85metanameviewportcontentinitial-scale1, maximum-scale1, user-scalableno, widthdevice-width6title/title78linkhreflib/ionic/css/ionic.cssrelstylesheet9linkhrefcss/style.cssrelstylesheet10linkhrefcss/angular-chart.min.cssrelstylesheet1112!--IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above13link hrefcss/ionic.app.css relstylesheet14--1516!--ionic/angularjs js--17scriptsrclib/ionic/js/ionic.bundle.js/script18scriptsrcjs/JPushPlugin.js/script1920scriptsrcjs/ng-cordova.min.js/script21!--cordova script (this will be a 404 during development)--22scriptsrccordova.js/script2324!--your apps js--25scriptsrcjs/jquery-1.11.3.min.jstypetext/javascript/script26scriptsrcjs/app.js/script27scriptsrcjs/controllers.js/script28scriptsrcjs/services.js/script2930scriptsrcjs/Chart.min.js/script31scriptsrcjs/angular-chart.min.js/script32/head33bodyng-appstarter34ion-nav-bar35/ion-nav-bar36ion-nav-view/ion-nav-view37/body38/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 中进行绑定也可如1divclassitem item-divider2一周收录变化3/div4divclassitem item-text-wrap5canvasidlineclasschart chart-linedatasite.ChartDatachart-labelssite.ChartLabelslegendtrueseriesseriesoptions{showTooltips: true}/canvas6/div而 option 的控制和 Chart js 的 options 是一样的。如控制不显示 tooltip则通过options{showTooltips: false}进行控制。发布打包后发现在 iOS 中性能表现完全满足在 Android 中的性能表现比 iOS 差很多不过这也算是 Ionic 平台的缺陷了。项目开源地址官网网站监控、API 监控与宕机提醒 - 咕咕监控iOS 版本‎咕咕监控 App - App StoreAndroid 版本咕咕监控相似应用下载_豌豆荚GitHub开源https://github.com/ParryQiu/GuGuJianKong