10款强大的开源 Javascript 图表库

一时失言乱红尘 2022-06-05 12:13 402阅读 0赞

**1、ECharts**

ECharts 由百度前端技术部开发的，是一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器(IE8/9/10/11、Chrome、Firefox、Safari等)，底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

ECharts 有良好的自适应效果，ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。

![图片1][1]

![图片2][2]

**2、Chart.jsw2222**

Chart.js 是一个简单、面向对象、为设计者和开发者准备的 Javascript 图表绘制工具库，基于 HTML5 canvas 技术，支持所有现代浏览器，并且针对 IE7/8 提供了降级替代方案。

Chart.js 不依赖任何外部工具库，轻量级(压缩之后仅有4.5k)，并且提供了加载外部参数的方法。能用多种不同的方式让数据变得可视化。

![图片3][3]

**3、jqPlot**

jqPlot 是一个非常强大的基于 jquery 类库的 Javascript 图表工具，可在网页中绘制线状、柱状、饼状等多种样式图表。

jqPlot 强大之处在于将内容呈现为动态嵌入的静态图像，这意味着图表数据可以通过 Ajax 更新，甚至不需要刷新页面。 某些图表类型甚至具有悬停选项，可在悬停时显示相关数据。

![图片5][5]

![图片6][6]

**4、Chartist.js**

Chartist.js 是一个使用 SVG 构建的简单的响应式图表库，可以作为前端图表生成器。同样兼容当前绝大部分浏览器(IE8/9/10/11、Chrome、Firefox、Safari等)。

Chartist.js 每个图表从大小到配色方案都是完全响应和高度可定制的，依靠 SVG 将图形作为图像动态地呈现到页面上。完全使用 SASS 构建，并且支持自定义。

![图片7][7]

![图片8][8]

**5、xCharts**

xCharts 是一个使用 D3.js 来构建漂亮的可定制的数据驱动的 JavaScript 图表库，使用 HTML、CSS、SVG 实现图表，适用于熟悉数据可视化的用户。

通过 xCharts 渲染的所有内容都有很强的适应性，在与数据交互时添加自己的动画或缓动函数也较为容易。

![图片9][9]

**6、C3.js**

C3.js 也是一个基于 D3.js 的可重用的开源 JavaScript 图表库。这意味着将数据图表绘制到 HTML 页面上的过程得到简化，不需要大量的自定义 D3 图表代码，也相对容易上手。

C3.js 所有的数据是完全动态的，从工具到图形颜色。它使用非常舒服，有充分的可定制性和控制性，支持多种图表类型。

![图片10][10]

**7、Pizza Pie Charts**

Pizza Pie Charts 是由 ZURB 开发的一个知名的 JavaScript 库，用于渲染基于 SVG 的饼图。

![图片11][11]

**8、Protovis**

Protovis 使用简单的标记(例如条形和点)组成数据的自定义视图。 与一些低级图形库不同，Protovis 通过对数据进行编码的动态属性来定义标记，允许继承、缩放和布局来简化构建。

![图片12][12]

**9、Flot**

Flot 是 jQuery 的纯 JavaScript 图表库，专注于使用简单，外观漂亮和强互动功能。它是特定的 jQuery 库，这意味着你需要使用它需要熟悉基础的 jQuery。但是从另一方面来说，这意味着你可以全面控制呈现，动作和用户交互。

![图片13][13]

**10、Dygraphs**

Dygraphs 也是一个基于 HTML5 canvas 的 JavaScript 图表库，可以生成一个可交互式的，可缩放的的曲线表，可以用来显示大密度的数据集(比如股票、气温等等)，并且可以让用户来浏览和解释这个曲线图。

![图片14][14]

[慧都控件网][Link 1]

[1]: /images/20220605/c2ce63a7df9843abb32b09e10d3694df.png
[2]: /images/20220605/311fa2dfb72b41cba1580d8155960de7.png
[3]: /images/20220605/09c65f651f0d41e6a5c24720ad709b54.png
[5]: /images/20220605/3b086f746de54c6d9428763dd41b0312.png
[6]: /images/20220605/9026813c54654f24a2eba8718a090baa.png
[7]: /images/20220605/caa5feeb949147e5b2755e5fa299421a.png
[8]: /images/20220605/b22dccd1aea24101b00db68484bb882e.png
[9]: /images/20220605/8480b6818ed84d3b93891397c5a6a4b5.png
[10]: /images/20220605/cb77ec4127214580ba75b613c5f512e1.png
[11]: /images/20220605/513cc8a588a249b586d53119d3c02f30.png
[12]: /images/20220605/cbd14b20e52941d6b4f38203ad5e7fc5.png
[13]: /images/20220605/fef30efae8d54722a74b5871287ed626.png
[14]: /images/20220605/a6c4c9a46bdf465890d44c86c3788836.png
[Link 1]: https://www.evget.com/article/2017/11/27/27339.html