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.

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.

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.

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.

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.

Attractive JavaScript plotting for jQuery
Flot 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 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;

参考资料:

几种charts控件的对比

15 best javascript chart libraries

Charts in Ionic的更多相关文章

  1. [目录]hybrid app 开发实战(基于ionic,cordova,angularjs)

    序:为什么要写这个系列 第一章:hybrid app开发之技术选型 第二章:ionic,cordova,phonegap关系浅析 第三章:ionic环境搭建之windows篇 第四章:ionic环境搭 ...

  2. 手动导入swift三方danielgindi/Charts到OC工程中教程

    1.到github网址上下载zip压缩包https://github.com/danielgindi/Charts 2.然后将解压后的文件夹整个拖到自己的工程文件夹下(很多教程只让拖xcodeproj ...

  3. ionic第二坑——ionic 上拉菜单(ActionSheet)安卓样式坑

    闲话不说,先上图: 这是IOS上的显示效果,代码如下: HTML部分: <body ng-app="starter" ng-controller="actionsh ...

  4. ionic第一坑——ion-slide-box坑(ion-slide分两页的坑)

    ionic.views.Slider = ionic.views.View.inherit({ initialize: function (options) { . . . function setu ...

  5. ionic之$ionicGesture手势(大坑)

    鄙人来本公司前未用过ionic框架,但由于ionic是基于angularjs封装的,正好我用过angularjs,很荣幸的面试就过了,然后通过该网站http://www.ionic.wang(后面简称 ...

  6. Ionic2系列——Ionic 2 Guide 官方文档中文版

    最近一直没更新博客,业余时间都在翻译Ionic2的文档.之前本来是想写一个入门,后来觉得干脆把官方文档翻译一下算了,因为官方文档就是最好的入门教程.后来越翻译越觉得这个事情确实比较费精力,不知道什么时 ...

  7. Win10 UWP开发系列:使用VS2015 Update2+ionic开发第一个Cordova App

    安装VS2015 Update2的过程是非常曲折的.还好经过不懈的努力,终于折腾成功了. 如果开发Cordova项目的话,推荐大家用一下ionic这个框架,效果还不错.对于Cordova.PhoneG ...

  8. Ionic 简单操作

    在使用 Ionic 之前要安装 Nodejs,Cordova . Java 下载Java 网站.Java 默认安装在 C:\Program Files\Java 文件目录. Android 下载And ...

  9. 图表插件Charts.js的使用

    Charts.js的介绍自行百度 首先下载Charts.js,官网:http://chartjs.cn/ charts.js 托管在了github上,下载下来后加解压出src中的文件即可.其中有cha ...

随机推荐

  1. 关于在jeecms中css,图片,html,模板是如何组装成——part1

    先从HTML入手:index.html <!DOCTYPE HTML> <html> <meta name="viewport" content=&q ...

  2. EBS登陆界面个性化

    把完整资料贴出来 Set the profile option Local Login Mask (FND_SSO_LOCAL_LOGIN_MASK). (This profile option is ...

  3. html manifest 离线配置

    HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: 离线浏览 - 用户可在应用离线时使用它们 速度 - 已缓存资源加载 ...

  4. 模拟Springboot二:内置tomcat

    既然要将tomcat内置到项目中,并且能够成功的启动项目就要知道 tomcat  做了哪些事情 ,那么就必须先搞明白 一个 普通的web项目是如何被我们本地配置的tomcat启动并运行的 (1). 先 ...

  5. 在成员函数中调用虚函数(关于多态的注意事项)------新标准c++程序设计

    类的成员函数之间可以互相调用.在成员函数(静态成员函数.构造函数和析构函数除外)中调用其他虚成员函数的语句是多态的.例如: #include<iostream> using namespa ...

  6. 数值限制------c++程序设计原理与实践(进阶篇)

    每种c++的实现都在<limits>.<climits>.<limits.h>和<float.h>中指明了内置类型的属性,因此程序员可以利用这些属性来检 ...

  7. java 实验2 类

    共5道大题  最后一题为自动洗牌发牌系统 1) 编写一个类实现银行帐户的概念.包括的属性有:帐号.储户姓名.地址.存款余额,包括的方法有:存款.取款.查询.计算利息.累加利息等. public cla ...

  8. kali linux之edb--CrossFire缓冲区溢出

    漏洞的罪恶根源------变量,数据与代码边界不清,开发人员对用户输入没做过滤,或者过滤不严 如这个脚本,写什么,显示什么,但是加上:,|,&&,后面加上系统命令,就执行命令了 缓冲区 ...

  9. MATLAB版本(2012b 64bit),在尝试调用svmtrain函数时报错

    问题:MATLAB版本(2012b 64bit),在尝试调用svmtrain函数时报错: 解决方案:参照https://blog.csdn.net/TIME_LEAF/article/details/ ...

  10. promise思考

    我写了三个单元块,分别对应三种业务场景 let query;query = (url) => { url=url||"传递的参数为空"; return new Promise ...