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. 30行代码搞定WCF并发性能测试

    [以下只是个人观点,欢迎交流] 30行代码搞定WCF并发性能 轻量级测试. 1. 调用并发测试接口 static void Main()         {               List< ...

  2. iOS之自动调节输入文本框的高度

    //自动调节输入文本框的高度 - (void)textViewDidChange:(UITableView *)textView{ float height; if ([[[UIDevice curr ...

  3. Android中通过线程实现更新ProgressDialog（对话进度条）

    作为开发者我们需要经常站在用户角度考虑问题,比如在应用商城下载软件时,当用户点击下载按钮,则会有下载进度提示页面出现,现在我们通过线程休眠的方式模拟下载进度更新的演示,如图(这里为了截图方便设置对话进 ...

  4. ios webview自适应实际内容高度4种方法

    有的时候会碰见类似的苦逼需求, webview自适应实际内容高度 下面有四种方法供使用 方法1:获取webview中scrovllview的contentsize进行设置   1 2 3 4 5 6 ...

  5. CentOS7minimal MySql的卸载及安装

    因为CentOS7精简版默认是有残留的MySql的,所以开始时一定要先卸载掉原来的MySql 首先要使用root用户登录 卸载: 1.卸载原有程序 yum remove mysql mysql-ser ...

  6. Asp.Net MVC+BootStrap+EF6.0实现简单的用户角色权限管理7

    做完角色之后接下来做先做页面按钮的增加.删除.修改.这里用到的功能和角色那边是一样的.就不多说了.直接上代码. 后台控制器代码 using AuthorDesign.Web.App_Start.Com ...

  7. InfluxDB学习之InfluxDB数据保留策略（Retention Policies）

    InfluxDB每秒可以处理成千上万条数据,要将这些数据全部保存下来会占用大量的存储空间,有时我们可能并不需要将所有历史数据进行存储,因此,InfluxDB推出了数据保留策略(Retention Po ...

  8. Ubuntu配置Ruby和Rails

    安装curl sudo apt-get install curl 安装RVM curl -L https://get.rvm.io | bash -s stable 通过RVM来安装Ruby rvm ...

  9. gdb进程调试，多进程调试

    1.单进程的调试 常规的通过gdb cmd这种方式开启调试,特别说明的是通过attach的方法附加到一个指定的进程上去进行调试,这种方法适合于调试一个已经运行的进程,具体用法:  gdb -p [pi ...

  10. Counting Bits -leetcode

    introduction: Given a non negative integer number num. For every numbers i in the range 0 ≤ i ≤ num  ...