Ionic中使用Chart.js进行图表展示以及在iOS/Android中的性能差异
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 平台的缺陷了。
项目开源地址
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中的性能差异的更多相关文章
- Chart.js 动态图表的使用
一.相关资料 1. 简介 Chart.js 是一个基于 HTML5 的简单的面向对象的图表库,支持包括 IE7/8 和所有现代浏览器.支持六种图标:曲线图(Linecharts).柱状图(Barcha ...
- vue中使用chart.js
1,安装chart.js和vue-chart.js npm install chart.js --save npm install vue-chart.js --save 2,独立文件,方便修改 封装 ...
- angulajs中引用chart.js做报表,修改线条样式
目前还有个问题,在手机上看,当折线y轴值超过1000,会有点问题 1.下载chart js,可以用bower 命令下载 http://www.chartjs.org/docs/#line-chart- ...
- ionic day01教程第一天之多平台运行(ios & android)
一.创建项目 创建项目 ionic start myApp 运行项目 (1)通过浏览器运行项目 进入项目,后运行ionic serve cd myApp ionic serve 浏览器运行效果 二.多 ...
- JSP中如何利用JS实现登录页面的跳转(JSP中如何利用JS实现跳转页面)
<%! <% url = word = } ...
- 使用原生 JS 复制文本兼容移动端 iOS & android
注意事项 使用 JS 实现复制功能并不是很难,但是有几个需要注意的地方. 首先文本只有选中才可以复制,所以简单的做法就是创建一个隐藏的 input,然后绑定需要复制的文本. 另外如果将 input 设 ...
- IOS中快速集成短信SDK验证开发(SMSSDK),IOS开发中如何设置手机验证码
[转载请注明出处] sdk是别人的,我只是下载来集成一下. smssdk下载网站:http://www.mob.com/(也有其他很多网站有类似SDK,譬如https://www.juhe.cn/等等 ...
- JS 复制文本兼容移动端 iOS & android
有几个需要注意的地方. 首先文本只有选中才可以复制,所以简单的做法就是创建一个隐藏的 input,然后绑定需要复制的文本. 另外如果将 input 设置为 `type="hidden&quo ...
- 通过js自动判断移动终端设备(ios\android等)
当用户用移动设备扫描一个二维码是,将扫描后的链接链接到一个页面,该页面只包含判断移动终端设备的js,判断好后自动跳转到对应的链接 或下载对应的内容. html代码如下: <script> ...
随机推荐
- iOS 多线程GCD简介
一.简介 1.1 GCD (Grand Central Dispatch )是Apple开发的一个多核编程的解决方法. Grand 含义是“伟大的.宏大的”,Central含义“中央的”,Dispat ...
- Linux安全基础:grep命令的使用
grep (缩写来自Globally search a Regular Expression and Print)是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹配的行打印出来.Unix的 ...
- EA(企业架构)落地之道
随着业务和IT的不断融合,企业业务.信息系统和技术结合日益紧密,企业对信息系统及技术的敏捷性要求越来越高.如何在多变的环境下快速创新产品或服务并推向市场是企业面临的日益紧迫的压力.企业架构作为连接和匹 ...
- [DOM Event Learning] Section 2 概念梳理 什么是事件 DOM Event
[DOM Event Learning] Section 2 概念梳理 什么是事件 DOM Event 事件 事件(Event)是用来通知代码,一些有趣的事情发生了. 每一个Event都会被一个E ...
- android 动画效果
动画资源 一.分类: (一).概要: 3.0以前,android支持两种动画模式,补间动画(tween animation),帧动画(frame animation),在android ...
- h5曲线滑动确认
h5项目需根据几条弯曲的线条让用户进行曲线式滑动,滑动时需实时响应某些样式,于是就有了下面这个实例.(可自定义多个子对象大小分别放在线条各处,以增加曲线滑动确认精度.) <!doctype ht ...
- h5滑动方向、手机拖动层
做h5时需对手指滑动方向判断及拖动浮动层,本文代码适用于手机端h5页面,pc页面可使用onMouseDown.onMouseUp.onMouseMove.(本方法仅为功能实现原理和演示,可根据自己的需 ...
- WebConfig配置文件详解
今天看到博客园一位朋友整理的一个WebConfig配置文件详解,觉得不错,转载一下: <?xml version="1.0"?> <!--注意: 除了手动编辑此文 ...
- LoadRunner:视频教程、课件
LoadRunner 视频教程地址: 51 自学网LoadRunner入门视频教程 (这个网站的网址粘不上来,可能与博客园有过节吧)视频中的课件下载地址:链接: http://pan.baidu.co ...
- 十几张表的join(千万级/百万级表) 7hours-->5mins
================START============================== 来了一个mail说是job跑得很慢,调查下原因 先来看下sql: SELECT h.order_ ...