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. .net 特性 Attribute

    public sealed class RemarkAttribute : Attribute { public string Remark { get; set; } // 构造函数 public ...

  2. [转载] C++ namespaces 使用

    原地址:http://blog.sina.com.cn/s/blog_986c99d601010hiv.html 命名空间(namespace)是一种描述逻辑分组的机制,可以将按某些标准在逻辑上属于同 ...

  3. 接上一篇,Springcloud使用feignclient远程调用服务404 ,为什么去掉context-path后,就能够调通

    一.问题回顾 如果application.properties文件中配置了 #项目路径 server.servlet.context-path=/pear-cache-service 则feigncl ...

  4. subset子集全排序问题

    思路一 可以用递推的思想,观察S=[], S =[1], S = [1, 2] 时解的变化. 可以发现S=[1, 2] 的解就是 把S = [1]的所有解末尾添上2,然后再并上S = [1]里面的原有 ...

  5. docker系列 参考文章

    Docker 系列一(概念原理和安装) Docker 系列二(操作镜像) Docker 系列三(容器管理) 持续更新... ubuntu 安装docker 参考文章 :(https://blog.cs ...

  6. Mybatis注解开发

    mybatis 的常用注解: @Insert:实现新增 @Update:实现更新 @Delete:实现删除 @Select:实现查询 @Result:实现结果集封装 @Results:可以与 @Res ...

  7. 用Python写一个随机密码生成器

    # /bin/python3 import sys import time import random strs = [ i for i in range(32,128) ] #产生密码的ASCII码 ...

  8. 【bzoj3329】Xorequ 矩阵快速幂

    Description Input 第一行一个正整数,表示数据组数据 ,接下来T行 每行一个正整数N Output 2T行 第2i-1行表示第i个数据中问题一的解, 第2*i行表示第i个数据中问题二的 ...

  9. BZOJ2668:[CQOI2012]交换棋子(费用流)

    题目描述 有一个n行m列的黑白棋盘,你每次可以交换两个相邻格子(相邻是指有公共边或公共顶点)中的棋子,最终达到目标状态.要求第i行第j列的格子只能参与mi,j次交换. 输入输出格式 输入格式: 第一行 ...

  10. linux防火墙(二)—— iptables语法之选项和控制类型

    一.语法: iptables [-t 表名] 选项 [链名] [匹配条件] [-j 控制类型] 未指定表名时,默认用filter表:链名,控制类型要大写:除非设置默认策略,否则必须指定匹配条件:不指定 ...