# 資訊圖像化、視覺化的網頁前端圖表程式比較

---

## 介紹

* 這邊整理了包含付費和免費的資訊圖像化前端 javascript，推薦各位依照自己的使用環境，選擇合適的套件。

* 目前沒有找到 **免費 簡單易用 支援RWD 列印友善 有圖形介面編輯器** 的3D圖表

---

## 免費區

---

## Chart.js
https://github.com/chartjs/Chart.js
MIT授權 範例多，支援rwd，有配合資料動態的小動畫，操作簡單，目前的首選 2021年巡查發現持續更新中


---

## Chart.js 推薦外掛 piechart
* https://emn178.github.io/chartjs-plugin-labels/samples/demo/

---

## Chart.js 推薦外掛 data labels plugin
https://chartjs-plugin-datalabels.netlify.com/samples/

---

## Chart.js 推薦外掛 即時串流圖表 plugin
https://github.com/nagix/chartjs-plugin-streaming
https://nagix.github.io/chartjs-plugin-streaming/samples/interactions.html

---

## Visjs

https://visjs.org/
MIT授權 範例多，無圓餅圖，但其他圖形多 (如 network 拓譜圖 timeline時間軸圖)，範例無RWD


---

## echarts
https://echarts.apache.org/zh/index.html
Apache2.0授權 範例多，3D類圖型強，可免費商業使用，有簡體中文教學
v4可支援IE8，目前的v5已不支援IE8

前身是 百度 echarts，以下網址隨時會失效，純供紀錄
~~https://vis.baidu.com/~~
~~http://echarts.baidu.com/~~

---

## Plotly.js
https://plot.ly/javascript/
MIT授權 範例多，支援rwd，有3D圖像，支援IE9+
可用python和R語言操作，有線上編輯器(可能要付費)

---

## jQuery Flot
https://github.com/flot/flot
MIT授權 有中文教學(http://www.jqueryflottutorial.com/tw/what-is-jquery-flot.html)
最後更新是2014年 範例數量中等

---

## d3.js
https://github.com/d3/d3
bsd授權 可免費商業使用 教學多範例多，但操作較困難 使用的物件是SVG，某些範例的圖列印時可能印不出來

---

## C3.js D3-based reusable chart library
https://github.com/c3js/c3
MIT授權 基於d3.js的簡易繪圖框架 圖表範例多 一樣某些圖列印時可能印不出來

---

## animated-3d-piechart、react-pie3d
https://github.com/woles/animated-3d-piechart
MIT授權，最後更新是2016年(專案已封存，作者另外做了react-pie3d專案)，基於d3.js 僅有圓餅圖 沒有中文教學

---

## react-pie3d
https://github.com/woles/react-pie3d
MIT授權，最後更新是2019，範例請見以下網址
https://woles.github.io/react-pie3d-demo/

---

## CHARTIST.JS
http://gionkunz.github.io/chartist-js/index.html
MIT授權 支援IE9 最後更新是2019年9月 有RWD 有CSS動畫的範例，只有10kb，有 Line、Bar、Pie等三大類範例

---

## jqPlot
http://www.jqplot.com/
MIT 授權 GPL 授權 圖表的互動性(動畫)看起來較低 ，支援ie7
中文教學看起來滿多的 http://www.sinmeng.net/info/31-31952-1.html


---

## Google Charts
https://developers.google.com/chart/
免費，可商業使用，可列印，圖型種類多，但只支援CDN，不能離線使用

---

## n3-charts
http://n3-charts.github.io/line-chart/#/home
MIT 授權，範例可直連codepen直接線上調整，有支援RWD，但範例僅有10個偏少

---

## 付費區

---

## highcharts
https://www.highcharts.com/
歷史悠久 一個開發者 **USD430** https://shop.highsoft.com/highcharts

---

## CanvasJS
https://canvasjs.com
一個網站**USD149** 一個開發者**USD299** 五個開發者**USD799**

---

## FusionCharts
https://www.fusioncharts.com
一個開發者 **USD497**

---

## amCharts
https://www.amcharts.com/v4/
商業使用需付費 **一個站USD140~280**， https://www.amcharts.com/online-store/
授權連接：https://github.com/amcharts/amcharts4/blob/master/dist/script/LICENSE
線上編輯：https://live.amcharts.com/
有3D的圓餅圖跟直條圖 範例數量不算多 好像沒有什麼中文教學
但看到有人說對中文支援不優 好像會跑版 但沒實作

---

## JavaScript Charts & Maps
* https://www.amcharts.com/
* 價格視內容的大小而定，似乎可以免費使用只是圖表旁邊都會有logo
看起來挺美的還沒仔細看


---

## 額外補充
這邊放了一些有關資訊圖像化的設計概念文章，可以參考
https://hackmd.io/2QGiY6SCTtWOmsmnuFSE0g

---

###### tags: `前端` `js` `css`