Charts in Ionic

Posted 2020-07-27 Introspection & Change

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 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：需要购买授权。

 

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.

• ECharts：BSD授权。

那么如何从众多的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	8	10	10	10	>10	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