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. HTTP 协议整理（转）

    HTTP 协议 作为web开发人员,了解一些http协议的知识很有必要.本文简单介绍了HTTP协议的知识,若有错误的地方,望大家斧正. 1.HTTP协议是什么? http协议是一个应用层的协议.规定了 ...

  2. 【代码笔记】iOS-图片手势，上传照片

    代码: RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController : UIViewControl ...

  3. Oracle数据库安装图文操作步骤

    一.Oracle 下载 注意Oracle分成两个文件,下载完后,将两个文件解压到同一目录下即可. 路径名称中,最好不要出现中文,也不要出现空格等不规则字符.   官方下地址: http://www.o ...

  4. MYSQL复制

    今天我们聊聊复制,复制对于mysql的重要性不言而喻,mysql集群的负载均衡,读写分离和高可用都是基于复制实现.下文主要从4个方面展开,mysql的异步复制,半同步复制和并行复制,最后会简单聊下第三 ...

  5. SQL Server性能调优系列

    这是关于SQL Server调优系列文章,以下内容基本涵盖我们日常中所写的查询运算的分解以及调优内容项,皆为原创........ 第一个基础模块注重基础内容的掌握,共分7篇文章完成,内容涵盖一系列基础 ...

  6. 【转】关于Java的Daemon线程的理解

    原文地址:http://www.cnblogs.com/ChrisWang/archive/2009/11/28/1612815.html 关于Java的Daemon线程的理解 网上对Java的Dae ...

  7. 使用 shell 脚本实现 LANMP 一键安装

    使用 shell 脚本来实现 LANMP 系统的一键安装.使用的操作系统是 CentOS 6 ,不区分 32 位和 64 位,要求机器可以连通互联网.支持 LAMP 和 LNMP ,MySQL 支持 ...

  8. 强大的DOM变化观察者MutationObserver

    在这之前 DOM3 提供了 Mutation events 事件 DOMAttrModified DOMAttributeNameChanged DOMCharacterDataModified DO ...

  9. 使用Jackson解析Json示例

    原文http://blog.csdn.net/gebitan505/article/details/17005735 custom.json: {     "country":&q ...

  10. STM32 KEIL不能输入仿真引脚端口error 65: access violation at 0x40021000 : no 'read' permission

    使用MDK自己创建一个STM32F103ZE核的项目 加入源码后编译,正常,在线仿真单步执行出现如下问题 error 65: access violation at 0x40021000 : no ' ...