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。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

     <title></title>

     <link href="lib/ionic/css/ionic.css" rel="stylesheet">

     <link href="css/style.css" rel="stylesheet">

     <link href="css/angular-chart.min.css" rel="stylesheet">

     <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above

     <link href="css/ionic.app.css" rel="stylesheet">

     -->

     <!-- ionic/angularjs js -->

     <script src="lib/ionic/js/ionic.bundle.js"></script>

     <script src="js/JPushPlugin.js"></script>

     <script src="js/ng-cordova.min.js"></script>

     <!-- cordova script (this will be a 404 during development) -->

     <script src="cordova.js"></script>

     <!-- your app's js -->

     <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>

     <script src="js/app.js"></script>

     <script src="js/controllers.js"></script>

     <script src="js/services.js"></script>

     <script src="js/Chart.min.js"></script>

     <script src="js/angular-chart.min.js"></script>

 </head>

 <body ng-app="starter">

 <ion-nav-bar>

 </ion-nav-bar>

 <ion-nav-view></ion-nav-view>

 </body>

 </html>

添加应用后需要在 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

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

  1. Chart.js 动态图表的使用

    一.相关资料 1. 简介 Chart.js 是一个基于 HTML5 的简单的面向对象的图表库,支持包括 IE7/8 和所有现代浏览器.支持六种图标:曲线图(Linecharts).柱状图(Barcha ...

  2. vue中使用chart.js

    1,安装chart.js和vue-chart.js npm install chart.js --save npm install vue-chart.js --save 2,独立文件,方便修改 封装 ...

  3. angulajs中引用chart.js做报表,修改线条样式

    目前还有个问题,在手机上看,当折线y轴值超过1000,会有点问题 1.下载chart js,可以用bower 命令下载 http://www.chartjs.org/docs/#line-chart- ...

  4. ionic day01教程第一天之多平台运行（ios & android）

    一.创建项目 创建项目 ionic start myApp 运行项目 (1)通过浏览器运行项目 进入项目,后运行ionic serve cd myApp ionic serve 浏览器运行效果 二.多 ...

  5. JSP中如何利用JS实现登录页面的跳转(JSP中如何利用JS实现跳转页面)

    <%!          <%                               url =              word =          }             ...

  6. 使用原生 JS 复制文本兼容移动端 iOS & android

    注意事项 使用 JS 实现复制功能并不是很难,但是有几个需要注意的地方. 首先文本只有选中才可以复制,所以简单的做法就是创建一个隐藏的 input,然后绑定需要复制的文本. 另外如果将 input 设 ...

  7. IOS中快速集成短信SDK验证开发(SMSSDK),IOS开发中如何设置手机验证码

    [转载请注明出处] sdk是别人的,我只是下载来集成一下. smssdk下载网站:http://www.mob.com/(也有其他很多网站有类似SDK,譬如https://www.juhe.cn/等等 ...

  8. JS 复制文本兼容移动端 iOS & android

    有几个需要注意的地方. 首先文本只有选中才可以复制,所以简单的做法就是创建一个隐藏的 input,然后绑定需要复制的文本. 另外如果将 input 设置为 `type="hidden&quo ...

  9. 通过js自动判断移动终端设备（ios\android等）

    当用户用移动设备扫描一个二维码是,将扫描后的链接链接到一个页面,该页面只包含判断移动终端设备的js,判断好后自动跳转到对应的链接 或下载对应的内容. html代码如下: <script> ...

随机推荐

  1. 2016第16本：TED演讲的秘密

    花0.01元抢购了<得到APP>中的<成甲说书:TED演讲的秘密>,不到30分钟的音频,感觉全是干货,基本不用看原书了.如果在以后的演讲中随便应用几条都可以让演讲水平提升一大截 ...

  2. 了解HTML CSS布局(层叠样式表)

    CSS全称为"层叠样式表(Cascading Style Sheets)", 它主要是用于定义HTML内容在浏览器内显示的样式, 比如文字, 颜色, 视觉上的静态效果, 布局等等. ...

  3. iOS--手势之谜

    原文转至: http://www.cnblogs.com/huangjianwu/p/4675648.html iOS在手机APP的手势操作中包含了:拖动.捏合.旋转.点按.长按.轻扫.自定义等等,详 ...

  4. Android5.0 TimePicker，DatePicker恢复成低版本滚动模式

    新版中的TimePicker DatePicker是不支持使用遥控器的, 恢复成低版本滚动模式只需要是xml文件加上一句即可: android:datePickerMode="spinner ...

  5. ORA-04091: table xxxx is mutating, trigger/function may not see it

    今天同事让我看一个触发器为什么老是报错,当执行DML语句触发触发器后,会报ORA-04091错误:ORA-04091: table xxxx is mutating, trigger/function ...

  6. IO is frozen on database xxx, No user action is required

    最近遇到一起关于"I/O is frozen on database xxx. No user action is required. However, if I/O is not resu ...

  7. Linux下监控服务器状态命令——top

    ----------------------------------工作中常用的命令,来判断服务器状态是否正常------------------------------------- top命令作用 ...

  8. Mysql 安装-windows X64

    1.首先下载mysql文件包 2.将下载到的mysql-5.6.24-x64.zip进行解压. 3.安装,直接下一步. 4.进入文件夹内复制my-default.ini文件,并重命名为my.ini 5 ...

  9. 设计模式C#实现（十六）——中介者模式

    意图 0 适用性 1 结构 2 实现 3 效果 4 参考 5 意图 用一个中介对象来封装一系列的对象交互.中介者使各对象不需要显示地相互引用,从而使其耦合松散,而且可以独立地改变他们之间的交互. 适用 ...

  10. day1 基础总结

    学习博客地址: http://www.cnblogs.com/alex3714/articles/5465198.html 低级语言:接近硬件底层 高级语言:接近用户思维 编程语言: 1. 编译型:c ...