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 ...
随机推荐
- POJ - 2586 Y2K Accounting Bug (找规律)
Accounting for Computer Machinists (ACM) has sufferred from the Y2K bug and lost some vital data for ...
- 小度wifi在window server2008R2系统下创建不了
小度wifi在window server2008R2系统下创建的时候会一直显示正在创建,然后又消失的情况.这是因为win server 2008下默认的无线lan服务没开启 解决方法: 在“服务管理器 ...
- 利用find同时查找多种类型文件
find . -name "*.c" -o -name "*.cpp" -o -name "*.h" 就可以列出当前目录下面所有的c,cpp ...
- 分别实现数组所有元素相加、相乘、相与——FP 风格
var ops = { "plus": (x,y)=>x+y, "mul" : (x,y)=>x*y, "and" : (x,y ...
- C# LINQ(6)
目前说了 select group...by where from join on equal 这几个关键字,如果经过练习,熟练使用这几个关键字,大部分的LINQ查询基本都是可以完成的. 今天说一下l ...
- javascript中var that=this
在JavaScript中,this代表的是当前对象. $(‘#conten').click(function(){ //this是被点击的#conten var that = this; $(‘.co ...
- selenium面试题
selenium中如何判断元素是否存在? selenium中没有提供原生的方法判断元素是否存在,一般我们可以通过定位元素+异常捕获的方式判断. # 判断元素是否存在 try: dr.find_elem ...
- 使用django进行发送 邮件
我们来看一下 django发送 邮件的整个流程 第一步:例先去 网易163注册账号并激活发邮件功能 把授权码进行 开启 来到我们的项目setting中进行 一个配置: # 邮箱的配置信息 EMAIL_ ...
- 【智能算法】迭代局部搜索(Iterated Local Search, ILS)详解
迭代局部搜索(Iterated Local Search, ILS) 源代码下载请关注微信公众号[程序猿声],在后台回复:[ILS],不包括[]即可下载. 00 目录 局部搜索算法 简单局部搜索 迭代 ...
- html基础知识,整理
# HMTL 基础知识 ###查看网页源代码吗 ``` ctrl + u``` ###dom元素 一个标签即代表一个dom元素 ###dom元素属性 ``` <p id ="first ...