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. jQuery静态方法inArray,grep,merge,makeArray方法使用和源码分析

    inArray方法 确定第一个参数在数组中的位置,从0开始计数(如果没有找到则返回 -1 ). 示例: var arr = [ 4, "Pete", 8, "John&q ...

  2. iOS 字号转换问题

    一,ps和pt转换 px:相对长度单位.像素(Pixel).(PS字体) pt:绝对长度单位.点(Point).(iOS字体) 公式如下: pt=(px/96)*72. 二,字体间转换 1in = 2 ...

  3. UTF-8和GBK等中文字符编码格式介绍及相互转换

    我们有很多时候需要使用中文编码格式,比如gbk.gb2312等,但是因为主要针对中文编码设置,因此并不完全通用,这样一来就有了在各编码间相互转换的需求,比如和UTF8的转换.可是在我使用的过程中,却发 ...

  4. web开发技术-过滤器

    纪录自己的学习过程,帮助记忆 1.简介 过滤器是服务器端的一个组件,可以接收用户端的请求和响应信息,并且对这些信息进行过滤 过滤器不处理结果,只做一些辅助性操作 2.过滤器的工作原理 3.过滤器的生命 ...

  5. Mac上idea快捷键

    名称 快捷键 代码提示 ctrl + space 自动修正 alt + enter 查看调用链call hierarchy ctrl + H 查找文件 双击shift 查找类 command + N ...

  6. Ubuntu16.04LTS国内快速源

    一.源文件位置 备份并替换/etc/apt/sources.list的源内容: 二.更改源文件内容 sudo vi /etc/apt/sources.list deb http://mirrors.a ...

  7. INITIAL参数设置导致TRUNCATE TABLE不能降低高水位线案例

    在一个数据库使用下面SQL找出了一批需要降低高水位线的表,其中有几个表没有数据,于是我打算用TRUNCATE来降低高水位线HWM SELECT a.owner,        a.segment_na ...

  8. xp_sendmail: 由于邮件错误 0x80004005 而失败

    今天收到一封邮件说我们的一台SQL SERVER 2000服务器发送邮件有问题.我测试中发现了如下错误: exec xp_sendmail 'Konglb@esquel.com','hello, 12 ...

  9. 【转】深入理解SQL的四种连接-左外连接、右外连接、内连接、全连接

    [原文]:http://www.jb51.net/article/39432.htm 1.内联接(典型的联接运算,使用像 =  或 <> 之类的比较运算符).包括相等联接和自然联接.    ...

  10. 几款比较好用的C语言的集成开发环境及在windows下用命令行编译C代码

    最近要用到C,所以尝试了这几款windows平台下比较好的IDE. VS2015:比较复杂和庞大,据说从2013版本开始支持C99标准. C-free:轻巧,但是不支持C99. vc++6.0:很多学 ...