HackMD
資訊圖像化、視覺化的網頁前端圖表程式比較
介紹
這邊整理了包含付費和免費的資訊圖像化前端 javascript，推薦各位依照自己的使用環境，選擇合適的套件。
目前沒有找到 免費 簡單易用 支援RWD 列印友善 有圖形介面編輯器 的3D圖表
免費區
Chart.js
https://github.com/chartjs/Chart.js
MIT授權 範例多，支援rwd，有配合資料動態的小動畫，操作簡單，目前的首選 2021年巡查發現持續更新中
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
推薦外掛 piechart
https://emn178.github.io/chartjs-plugin-labels/samples/demo/
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
推薦外掛 data labels plugin
https://chartjs-plugin-datalabels.netlify.com/samples/
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
推薦外掛 即時串流圖表 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
有簡中的文件
https://ame.cool/core/frontend-tools/
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
echarts
https://echarts.apache.org/zh/index.html
Apache2.0授權 範例多，3D類圖型強，可免費商業使用，有簡體中文教學
v4可支援IE8，目前的v5已不支援IE8
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
前身是 百度 echarts，以下網址隨時會失效，純供紀錄
https://vis.baidu.com/
http://echarts.baidu.com/
Plotly.js
https://plot.ly/javascript/
MIT授權 範例多，支援rwd，有3D圖像，支援IE9+
可用python和R語言操作，有線上編輯器(可能要付費)
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
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，某些範例的圖列印時可能印不出來
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
C3.js D3-based reusable chart library
https://github.com/c3js/c3
MIT授權 基於d3.js的簡易繪圖框架 圖表範例多 一樣某些圖列印時可能印不出來
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
animated-3d-piechart、react-pie3d
https://github.com/woles/animated-3d-piechart
MIT授權，最後更新是2016年(專案已封存，作者另外做了react-pie3d專案)，基於d3.js 僅有圓餅圖 沒有中文教學
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
react-pie3d
https://github.com/woles/react-pie3d
MIT授權，最後更新是2019，範例請見以下網址
https://woles.github.io/react-pie3d-demo/
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
CHARTIST.JS
http://gionkunz.github.io/chartist-js/index.html
MIT授權 支援IE9 最後更新是2019年9月 有RWD 有CSS動畫的範例，只有10kb，有 Line、Bar、Pie等三大類範例
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
jqPlot
http://www.jqplot.com/
MIT 授權 GPL 授權 圖表的互動性(動畫)看起來較低 ，支援ie7
中文教學看起來滿多的 http://www.sinmeng.net/info/31-31952-1.html
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Google Charts
https://developers.google.com/chart/
免費，可商業使用，可列印，圖型種類多，但只支援CDN，不能離線使用
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
n3-charts
http://n3-charts.github.io/line-chart/#/home
MIT 授權，範例可直連codepen直接線上調整，有支援RWD，但範例僅有10個偏少
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
付費區
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
