1. 程式人生 > >The shortest answer is doing。

The shortest answer is doing。

echarts

評價: 5星(國產元件,達到這種高度,不多)

官網: http://echarts.baidu.com/

說明: ECharts,一個純 Javascript 的圖表庫,可以流暢的執行在 PC 和移動裝置上,相容當前絕大部分瀏覽器(IE8/9/10/11,Chrome,Firefox,Safari等),底層依賴輕量級的 Canvas 類庫 ZRender,提供直觀,生動,可互動,可高度個性化定製的資料視覺化圖表。ECharts 3 中更是加入了更多豐富的互動功能以及更多的視覺化效果,並且對移動端做了深度的優化。

教程: http://echarts.baidu.com/tutorial.html#ECharts 特性介紹

demo: http://echarts.baidu.com/demo.html#bubble-gradient

原始碼: https://github.com/ecomfe/echarts

基於各種語言的例子:https://github.com/ecomfe/echarts

rickshaw

官網:

http://code.shutterstock.com/rickshaw/ 這個地址不翻牆,打不開

https://github.com/shutterstock/rickshaw

說明: Rickshaw 是一個用於繪製時序圖的簡單 jS 庫,基於 Mike Bostock’s delightful D3 庫構建

demo: https://github.com/shutterstock/rickshaw/tree/master/examples

sparkline

官網:

http://omnipotent.net/jquery.sparkline/

http://www.highcharts.com/

說明: sparkline是一類資訊體積小和資料密度高的圖表。目前它被用作一些測量,相關的變化的資訊呈現的方式,如平均溫度,股市交投活躍。sparkline常常以一組多條的形式出現在柱狀圖,折線圖當中。

Demo: http://www.highcharts.com/demo/sparkline

flot-chart

官網: http://www.flotcharts.org/

說明: Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.

Demo: http://www.flotcharts.org/flot/examples/

學習資源

http://www.jqueryflottutorial.com/jquery-flot-chart-types.html

原始碼: https://github.com/flot/flot

例項原始碼: https://github.com/flot/flot/tree/master/examples

easypiechart

官網: https://github.com/rendro/easy-pie-chart/

說明:EASY PIE CHART是一個輕量級的jQuery外掛,主要用來渲染和製作漂亮的餅圖及動畫效果,基於與HTML5的canvas元素。

Demo: https://github.com/rendro/easy-pie-chart/tree/master/demo

Chart.js

官網:http://chartjs.org/

說明: Chart.js是一個基於HTML5 canvas技術的開源圖表繪製工具庫。Chart.js簡化了在網站上繪製動態圖表的工作。

文件: http://www.chartjs.org/docs/

中文文件: http://www.bootcss.com/p/chart.js/docs/

Knob Charts

官網: http://anthonyterrien.com/knob/

說明: 一款生成超酷的旋鈕特效的工具庫

Demo: http://anthonyterrien.com/demo/knob/

morris.js

官網: http://morrisjs.github.io/morris.js/

說明: Morris.js 是一個輕量級的JS庫,用來生成各種時序圖和區域圖

原始碼: https://github.com/morrisjs/morris.js/

Demo: https://github.com/morrisjs/morris.js/tree/master/examples