本文总阅读量:  次 | 文章总字数: 722 字

Ionic 中使用 Chart.js 进行图表展示

本文介绍了如何在 Ionic 中使用图表展示数据。

Angular Chart 简介

之前的文章 中介绍了使用 Ionic 开发跨平台(iOS & Android)应用中遇到的一些问题的解决方案。
在更新0.1.3版本的过程中遇到了需要使用图表展示一周搜索引擎抓取变化的需求,因为之前使用过 Chart.js, 所以去查了些资料果然是有既有的模块的。
Angular Chart 就是基于 Chart.js 以及 Angular 构件的图标展示组件。
Chart Using

Angular Chart 的使用

分别下载 Chart.js 和 Angular Chart,下载后在项目中添加 angular-chart.min.js 和 Chart.min.js 以及 angular-chart.css。
添加应用后需要在 app.js 中添加模块包含。

angular.module('starter', ['ionic', 'chart.js'])

数据的提供主要为 x 轴线和 y 轴的数据以及数据项的名称。
x 轴:chart-labels,数组
y 轴:chart-data,多维数组
数据项的名称:chart-series,数组
这些数据源可以在对于的 controller 中设置,如:
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
     [65, 59, 80, 81, 56, 55, 40],
     [28, 48, 40, 19, 86, 27, 90]
]; 

如果有多个图标,可以在 repeater 中进行绑定也可,如:
<div class="item item-divider">
    一周收录变化
</div>
<div class="item item-text-wrap">
     <canvas id="line" class="chart chart-line" data="site.ChartData" chart-labels="site.ChartLabels" legend="true" series="series"
     options="{showTooltips: true}"></canvas>
</div>

而 option 的控制和 Chart js 的 options 是一样的。
如控制不显示 tooltip,则通过 options="{showTooltips: false}" 进行控制。
发布打包后发现在 iOS 中性能表现完全满足,在 Android 中的性能表现比 iOS 差很多,不过这也算是 Ionic 平台的缺陷了。

项目开源地址

官网:http://gugujiankong.com/
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
GitHub开源:https://github.com/ParryQiu/GuGuJianKong

EOF

转载须以超链接形式标明文章原始出处和作者信息