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版本:d3angularintegrationangular d3 svgd3 on angularjs

Google Chart的angular版本:Angular Google Chart

ChartJS的angular版本:Angular-Chart

ChartistJS的angular版本:ng-chartist.jschartistAngularDirective.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. MVC5中 在更新 Microsoft.Aspnet.Identity 后编译器错误

    环境:vs2013预览版chs,我试着创建vb.net web应用,从对话框中选择MVC和WebAPI.编译ok了.通过NuGet管理器更新了Microsoft.Aspnet.Identity.Cor ...

  2. WebApi与MVC Route 问题整理

    1. 为WebAPI添加 Area后,完成了CustomControllerSelector的制定. 跟踪WebAPI底层,整理WebAPI源码后发现几个问题: 1. 使用Area的controlle ...

  3. asp.netcore+jenkins+docker+svn+centos7.2 持续集成,每天凌晨获取最新代码打包发布

    运行环境: centos7.2服务器或则虚拟机 可以是腾讯云也可以是内网服务器,(如果是内网服务器需要用frp做内网穿透,这样才可以通过外网访问该服务器) svnserver 来托管代码 一.安装je ...

  4. 以太坊系列之十一: 零起步使用remix开发智能合约

    一步一步使用remix开发智能合约 最新版的remix(2017-8-3)只能使用在线开发了,已经没有离线版本了,并且好像在线版本要FQ才能访问(自行解决). 1.打开remix 注意地址如果是htt ...

  5. 远程连接linux服务上的mysql

    如果有童鞋linux上还未安装mysql数据库可以参考我上一篇博客 (1)首先确保 linux服务上的 mysql 的3306端口是对外开放的 编辑 vi /etc/sysconfig/iptable ...

  6. 【bzoj4806~bzoj4809】 象棋四连发 DP-高精度-匈牙利算法-dfs

    都是经典题了吧..我好无聊.. 4806 4806-1801是双倍经验..DP方程看代码吧.. /* http://www.cnblogs.com/karl07/ */ #include <cs ...

  7. Spark大数据处理 之 从WordCount看Spark大数据处理的核心机制(1)

    大数据处理肯定是分布式的了,那就面临着几个核心问题:可扩展性,负载均衡,容错处理.Spark是如何处理这些问题的呢?接着上一篇的"动手写WordCount",今天要做的就是透过这个 ...

  8. 【智能算法】用模拟退火(SA, Simulated Annealing)算法解决旅行商问题 (TSP, Traveling Salesman Problem)

    喜欢的话可以扫码关注我们的公众号哦,更多精彩尽在微信公众号[程序猿声] 文章声明 此文章部分资料和代码整合自网上,来源太多已经无法查明出处,如侵犯您的权利,请联系我删除. 01 什么是旅行商问题(TS ...

  9. c语言数据结构学习心得——图

    图G由顶点集V和边集E组成,记为G=(V,E) 图不可为空,一定有顶点集不为空 有向图:有向边(弧)的有限集合 无向图:无向边的有限集合 连通:顶点V到顶点V'有路径 连通分量:无向图中的极大连通子图 ...

  10. idea中文输入问题

    desc: idea2017.3.4输入中文,光标不跟随. 解决方案: