Charts in Ionic

Posted Introspection & Change

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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.

 

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

8

10

10

10

>10

10

> 10

>10

D3.js的angular版本:d3angularintegrationangular d3 svg d3 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的主要内容,如果未能解决你的问题,请参考以下文章

iOS 图表工具charts之PieChartView

如何更新 IOS Charts, danielgindi/Charts 中的限制线

iOS图表库Charts使用(不常见但很实用的属性)

常见绘图框架-(Charts)

图表插件Charts.js的使用

Flutter-charts_flutter圖表插件