Charts in Ionic
Chart对于任何应用来说都是不可或缺的一部分,hybrid app也是如此。
先罗列一下有哪些可用的Chart library:
- D3.JS -- Data-Driven Documents,BSD license。
D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.
- Angular Google Chart:Google Chart Tools for Angular Module。
Google Charts is my go-to JavaScript library for creating charts easily. It provides many pre-built charts like area charts, bar charts, calendar charts, pie Charts, geo charts, and more.
Google charts also comes with various customization options that help in changing the look of the graph. Charts are rendered using HTML5/SVG to provide cross-browser compatibility and cross platform portability to iPhones, iPads, and Android. It also includes VML for supporting older IE versions.
- ChartJS:MIT license。
- Chartist.JS:MIT license
- n3-charts:based on D3.js, BSD license.
If you are an AngularJS developer, you will definitely find n3-charts extremely useful and interesting. n3-charts is built on top of D3.js and AngularJS. It provides various standard charts in the form of customisable AngularJS directives.
- Zing Chart:需要购买授权。
ZingChart offers a flexible, interactive, fast, scalable and modern product for creating charts quickly. Their product is used by companies like Apple, Microsoft, Adobe, Boeing and Walmart, and uses Ajax, JSON, HTML5 to deliver great-looking charts quickly.
- High Charts:个人研究可以免费试用,但是商业应用需要购买授权。
Highcharts JS is another very popular library for building graphs. It comes loaded with many different types of cool animations that are sufficient to attract many eyeballs to your website. Just like other libraries, Highcharts comes with many pre-built graphs like spline, area, areaspline, column, bar, pie, scatter, etc.
One of the biggest advantages of using Highcharts JS is the compatibility with older browsers like Internet Explorer 6. Standard browsers use SVG for the graphics rendering. In legacy Internet Explorer, graphics are drawn using VML.
- Fusion Charts:需要购买授权。
Fusioncharts is one of the oldest JavaScript charting libraries that was released in 2002. Charts are rendered using HTML5/SVG and VML for better portability and compatibility.
Unlike many libraries, Fusioncharts provides data parsing through both JSON and XML. You can also export these charts in three different formats: PNG, JPG and PDF.
Fusioncharts is highly compatible with older browsers like Internet Explorer 6. It has become one of the favorite charting libraries for many businesses just for this alone.
- Flot Charts:免费。
Attractive JavaScript plotting for jQueryFlot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.Works with Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+Flot is completely free to use and commercial support is provided on special request to the creator.
- amCharts:需要购买授权。
amCharts is an advanced charting library that will suit any data visualization need. Our charting solution include Column, Bar, Line, Area, Step, Step without risers, Smoothed line, Candlestick, OHLC, Pie/Donut, Radar/ Polar, XY/Scatter/Bubble, Bullet, Funnel/Pyramid charts as well as Gauges.
Our charts is a completely standalone and independent library, which doesn’t require any 3rd party includes. You can download, try and even use our charts for free. Check chart demos to see all the charts in action.
那么如何从众多的JavaScript Chart库中选择合适的呢?我们的要求:开源、免费、可以商业使用、基于angularJS实现或者有基于angularJS实现的版本。下面是筛选过后的列表:
|
D3 |
Google Chart |
ChartJS |
ChartistJS |
N3-Charts |
Zing Chart |
High Charts |
Fusion Chart |
amChart |
eCharts |
|
|
授权类型 |
BSD |
Apache 2.0 |
MIT |
MIT |
BSD |
商业授权 |
商业授权 |
商业授权 |
商业授权 |
BSD |
|
支持语言 |
Original JS |
Original JS |
Original JS |
Original JS |
Angular JS |
Original JS |
Original JS |
Original JS |
JQuery |
Original JS |
|
是否有Angular JS的实现版本 |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
|||
|
手机端是否可用 |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
|
Chart种类 |
>10 |
>25 |
>10 |
> 10 |
>10 |
D3.js的angular版本:d3angularintegration,angular d3 svg,d3 on angularjs;
Google Chart的angular版本:Angular Google Chart;
ChartJS的angular版本:Angular-Chart;
ChartistJS的angular版本:ng-chartist.js,chartistAngularDirective.js;
ECharts的angular版本:Angular-echarts;
参考资料:
15 best javascript chart libraries
Charts in Ionic的更多相关文章
- [目录]hybrid app 开发实战(基于ionic,cordova,angularjs)
序:为什么要写这个系列 第一章:hybrid app开发之技术选型 第二章:ionic,cordova,phonegap关系浅析 第三章:ionic环境搭建之windows篇 第四章:ionic环境搭 ...
- 手动导入swift三方danielgindi/Charts到OC工程中教程
1.到github网址上下载zip压缩包https://github.com/danielgindi/Charts 2.然后将解压后的文件夹整个拖到自己的工程文件夹下(很多教程只让拖xcodeproj ...
- ionic第二坑——ionic 上拉菜单(ActionSheet)安卓样式坑
闲话不说,先上图: 这是IOS上的显示效果,代码如下: HTML部分: <body ng-app="starter" ng-controller="actionsh ...
- ionic第一坑——ion-slide-box坑(ion-slide分两页的坑)
ionic.views.Slider = ionic.views.View.inherit({ initialize: function (options) { . . . function setu ...
- ionic之$ionicGesture手势(大坑)
鄙人来本公司前未用过ionic框架,但由于ionic是基于angularjs封装的,正好我用过angularjs,很荣幸的面试就过了,然后通过该网站http://www.ionic.wang(后面简称 ...
- Ionic2系列——Ionic 2 Guide 官方文档中文版
最近一直没更新博客,业余时间都在翻译Ionic2的文档.之前本来是想写一个入门,后来觉得干脆把官方文档翻译一下算了,因为官方文档就是最好的入门教程.后来越翻译越觉得这个事情确实比较费精力,不知道什么时 ...
- Win10 UWP开发系列:使用VS2015 Update2+ionic开发第一个Cordova App
安装VS2015 Update2的过程是非常曲折的.还好经过不懈的努力,终于折腾成功了. 如果开发Cordova项目的话,推荐大家用一下ionic这个框架,效果还不错.对于Cordova.PhoneG ...
- Ionic 简单操作
在使用 Ionic 之前要安装 Nodejs,Cordova . Java 下载Java 网站.Java 默认安装在 C:\Program Files\Java 文件目录. Android 下载And ...
- 图表插件Charts.js的使用
Charts.js的介绍自行百度 首先下载Charts.js,官网:http://chartjs.cn/ charts.js 托管在了github上,下载下来后加解压出src中的文件即可.其中有cha ...
随机推荐
- tomcat启动startup.bat一闪而过
编辑startup.bat,在文本最后添加PAUSE,保存后打开startup.bat,此时窗口会暂停,并出现错误信息,然后按照错误提示纠正即可!
- 【单例模式】Singleton pattern
前言:有很多时候,在一个生命周期中我们只要一个对象就可以了,比如:线程池,缓存,对话框,日志,显卡驱动等等.如果造出多个实例,就会导致许多问题产生,例如:程序的行为异常.资源使用过量,或者说不一致的结 ...
- Persistent and Transient Data Structures in Clojure
此文已由作者张佃鹏授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 最近在项目中用到了Transient数据结构,使用该数据结构对程序执行效率会有一定的提高.刚刚接触Trans ...
- Mysql初识数据库《三》数据库概述
1 什么是数据(Data) 描述事物的符号记录称为数据,描述事物的符号既可以是数字,也可以是文字.图片,图像.声音.语言等,数据由多种表现形式,它们都可以经过数字化后存入计算机 在计算机中描述一个事物 ...
- 20165219 2017-2018-2 《Java程序设计》第4周学习总结
20165219 2017-2018-2 <Java程序设计>第4周学习总结 课本知识总结 第五章 在java中,继承时使用extends关键字,private成员也会被继承,只不过子类无 ...
- 流水的算法,铁打的损失函数/MLE
机器学习算法可以说是不少的,如果死记硬背的话,只能当时记得推导过程和步骤,过一段时间就又想不起来了,只能依稀记得一些影子.所以,应该找到算法的一些通用的方法来理解算法的思路以及推导过程. 我认为,最大 ...
- 如何离线Windows server 2008R2 激活教程?
服务器离线激活,可是费了老大劲了,不过最后还不是离线激活,还必须联网,也或许你运气好,不联网也能激活. 如果由于种种原因不能有线的话,那就可以试试这种方法了. 1.首先,开启无线LAN服务.(不会开启 ...
- WCF 客户端连接慢
WCF客户端第一次连接超过1分钟,以后再连接就快了. 在 Config中加入 <basicHttpBinding> <binding name="BasicHttpBind ...
- Jmeter拓展插件可查看和lr一样的图形结果
利用插件可通过图形直观查看CPU.Memory等的运行情况 1. JmeterPlugins.jar插件下载地址:http://jmeter-plugins.org/downloads/all 下载并 ...
- Python web前端 01 HTML常用标签
Python web前端 01 HTML常用标签 一.HTML创建项目 file ---->new project -----> 输入项目名------>创建文件夹 new dicr ...