canvas/数据可视化常用的工具库汇总

叁歲伎倆 2022-11-24 12:58 201阅读 0赞

1：d3

star:92.7k  
官网：[https://d3js.org/][https_d3js.org]  
GitHub地址：[https://github.com/mbostock/d3][https_github.com_mbostock_d3]

d3 一个基于数据操作文档的js数据可视化框架，最流行的数据可视化库之一 。

![format_png][]

2：Chart.js

star:49.8k  
中文网：[http://chartjs.cn/][http_chartjs.cn]  
GitHub地址：[https://github.com/nnnick/Chart.js][https_github.com_nnnick_Chart.js]

Chart.js是一套简单、干净并且有吸引力的基于 html5 技术的 JavaScript 图表工具。Chart.js为你提供了完整的易于集成到你的网站的生动、交互的图表。

![format_png 1][]

3：c3

star:8.8k  
网站地址:[http://c3js.org][http_c3js.org]  
GitHub:[https://github.com/c3js/c3][https_github.com_c3js_c3]

C3.js是基于D3.js开发的JavaScript库，它可以让开发者构建出可复用的图表，并且还提供了一系列图表上的交互行为。通过C3，只需要往generate函数中传入数据对象就可以轻松的绘制出图表，方便开发者使用。

![format_png 2][]

4：g2

star:9.9k  
网站地址:[https://antv.alipay.com/zh-cn/g2/3.x/index.html][https_antv.alipay.com_zh-cn_g2_3.x_index.html]  
GitHub:[https://github.com/antvis/g2][https_github.com_antvis_g2]

g2是一个由纯 JavaScript 编写基于 Canvas 的强大的语义化图表生成工具，它提供了一整套图形语法，可以让用户通过简单的语法搭建出无数种图表，并且集成了大量的统计工具，支持多种坐标系绘制，可以让用户自由得定制图表，是为大数据时代而准备的强大的可视化工具。

![format_png 3][]

5：highcharts

star:9.6K

中文网：[https://www.highcharts.com.cn/][https_www.highcharts.com.cn]  
GitHub地址：[https://github.com/highcharts/highcharts][https_github.com_highcharts_highcharts]

基于SVG的JavaScript 图表框架，兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库。 一般的问题好解决，但是一旦遇到了关键问题，个人支持非常有限， 支持图形相对于fusioncharts来说，比较少

![format_png 4][]

6：g6

star:6.7K  
网站地址:[https://antv.alipay.com/zh-cn/g6/3.x/index.html][https_antv.alipay.com_zh-cn_g6_3.x_index.html]  
GitHub:[https://github.com/antvis/g6][https_github.com_antvis_g6]

G6 是一个简单、易用、完备的图可视化引擎，它在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者搭建属于自己的图 图分析 应用或是 图编辑器 应用。

![format_png 5][]

7：ECharts

star:42.3k  
中文网：[https://echarts.apache.org/zh/index.html][https_echarts.apache.org_zh_index.html]  
GitHub地址：[https://github.com/ecomfe/echarts][https_github.com_ecomfe_echarts]

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。是百度的一个开源的数据可视化工具。

![format_png 6][]

**8：Leaflet**

star:28.6K  
官网：[https://leafletjs.com/download.html][https_leafletjs.com_download.html]  
GitHub地址：[https://github.com/Leaflet/Leaflet][https_github.com_Leaflet_Leaflet]

Leaflet 是一个为移动设备设计的交互式地图的开源的 javascript库， 并只有38k，包含了大多数开发者需要的地图特点。常常被用于需要展示地理位置的项目。

![image][]

image

**9：highcharts**

star:9.6K

中文网：[https://www.highcharts.com.cn/][https_www.highcharts.com.cn]  
GitHub地址：[https://github.com/highcharts/highcharts][https_github.com_highcharts_highcharts]

基于SVG的JavaScript 图表框架，兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库。一般的问题好解决，但是一旦遇到了关键问题，个人支持非常有限， 支持图形相对于fusioncharts来说，比较少

![image][image 1]

image

[https_d3js.org]: https://d3js.org/
[https_github.com_mbostock_d3]: https://github.com/mbostock/d3
[format_png]: /images/20221124/330346d2a1f74d31ace69d248912f13c.png
[http_chartjs.cn]: http://chartjs.cn/
[https_github.com_nnnick_Chart.js]: https://github.com/nnnick/Chart.js
[format_png 1]: /images/20221124/e2406dd1eacf43aea7c3a62309c04039.png
[http_c3js.org]: http://c3js.org
[https_github.com_c3js_c3]: https://github.com/c3js/c3
[format_png 2]: /images/20221124/67478033c4ef44ff92d6e2d4fbd573e1.png
[https_antv.alipay.com_zh-cn_g2_3.x_index.html]: https://antv.alipay.com/zh-cn/g2/3.x/index.html
[https_github.com_antvis_g2]: https://github.com/antvis/g2
[format_png 3]: /images/20221124/5713564f8e9e4822bed939d41065e0b3.png
[https_www.highcharts.com.cn]: https://www.highcharts.com.cn/
[https_github.com_highcharts_highcharts]: https://github.com/highcharts/highcharts
[format_png 4]: /images/20221124/f8bbccea476f449e9fc4e80bb47518c8.png
[https_antv.alipay.com_zh-cn_g6_3.x_index.html]: https://antv.alipay.com/zh-cn/g6/3.x/index.html
[https_github.com_antvis_g6]: https://github.com/antvis/g6
[format_png 5]: /images/20221124/024f2885c62f48769456f6f84c7136f6.png
[https_echarts.apache.org_zh_index.html]: https://links.jianshu.com/go?to=https%3A%2F%2Fecharts.apache.org%2Fzh%2Findex.html
[https_github.com_ecomfe_echarts]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fecomfe%2Fecharts
[format_png 6]: /images/20221124/52408359334d403794c2b150535e7385.png
[https_leafletjs.com_download.html]: https://leafletjs.com/download.html
[https_github.com_Leaflet_Leaflet]: https://github.com/Leaflet/Leaflet
[image]: /images/20221124/1e10a24413794539a400bbc13645a7de.png
[image 1]: /images/20221124/0267f9e2621543c5b5ee7128f9557bd5.png