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. Css动画总结

    transform: transition: animation:

  2. C语言中把数字转换为字符串 【转】

    在将各种类型的数据构造成字符串时,sprintf 的强大功能很少会让你失望.由于sprintf 跟printf 在用法上几乎一样,只是打印的目的地不同而已,前者打印到字符串中,后者则直接在命令行上输出 ...

  3. sharepoint 相关<httpHandlers>

    <add verb="GET,POST,HEAD,(GETSOURCE),(HEADSOURCE),(POSTSOURCE)" path="*.doc,*.docx ...

  4. 自定义母版页之列表过滤菜单位置issue fix

    问题描述: 自定义母版页,为了使左边导航和顶部导航位置不变(不滚动),将原本位于ribbon下方的#s4-workspace调整到左侧导航右边. <div id="s4-workspa ...

  5. 邓白氏码的申请-iOS公司开发者账号准备

    相比较个人开发者账号的申请,公司(or企业)的账号申请要稍显复杂,很关键的一点就是邓白氏码的申请,而在网上找了好久也没有找到相对系统的方法流程.因此, 用本文记录我在公司申请邓白氏码过程,以备之后不时 ...

  6. JavaScript的个人学习随手记（三）

    JavaScript Window - 浏览器对象模型 Window 对象 以下window对象时使用均可省略window 所有浏览器都支持 window 对象.它表示浏览器窗口. 所有 JavaSc ...

  7. 【转】单例模式（singletion）

    单例模式(Singleton) 原地址:http://www.cnblogs.com/BoyXiao/archive/2010/05/07/1729376.html 首先来明确一个问题,那就是在某些情 ...

  8. JavaScript语言精粹（读书笔记）

    第一章 精华 1,JavaScript的函数(主要)基于词法作用域(lexical scoping)的顶级对象.强类型语言允许编译器在编译时检测错误,但弱类型很自由,无需建立复杂的类层次,不用做强制造 ...

  9. MVC学习系列3--怎么从控制器向视图传递数据

    在MVC中,从控制器到视图,传递数据,可以使用 ViewData 和 ViewBag:同样从视图到控制器,传递数据,可以使用Post,QueryString,或者隐藏域:最后从控制器到控制器,传递数据 ...

  10. imcs初探

    imcs简介 https://github.com/knizhnik/imcs 翻译过来是在内存上的列存储,在对于一张'静态'的表计算方面很有优势,在许多聚合运算中都有使用线程并行计算,而且其中使用了 ...