数据时代，收集和使用数据的需求正在爆发式增长，数据可视化也变得愈加重要。开发人员在想方设法将不同数据库中的记录整合到仪表板和漂亮的图表中，向人们快速直观地展示信息。

在过去十年中数据可视化技术不断改进，结果涌现了很多高水平的图表库。

21 世纪初期，人们使用服务端图像位图来生成图表。那时像 Silverlight 和 Flash 这样的插件提供了丰富的交互式图表体验，代价是减少电池寿命、拖慢下载速度并耗费更多系统资源。

移动设备兴起之后，移动平台不再支持插件并开始转向开放客户端技术，这些技术可以在任何平台上运行，成为了开发人员的首选。同时，触摸手势缩放和非常高分辨率的屏幕开始流行，使得无关分辨率的矢量图表广受欢迎。

随之而来的就是数据可视化的时代，SVG 可扩展矢量图像和 JavaScript 成为主角。今天的图表技术可支持所有浏览器平台，支持交互性和动画，并且不需要特殊的插件。这些图表在高分辨率设备中也有很好的显示效果。我们可以在 JS 开发中使用许多 JavaScript 图表库实现这些目标。

市面上有很多 JavaScript 图表库，本文则列出了其中的几款佼佼者，可以用在你的新项目中。

以下就是 2019 年的顶级 Javascript 图表库名单。

D3.js

D3.js 是一个图形 JavaScript 库，功能众多，十分强大。你可以用它对文档做数据驱动的转换，然后将任意数据绑定到 DOM 上。

D3 是非常优秀的图表库。它有一些较小的技术模块，如颜色、轴、轮廓、层次结构、多边形、缓动等。这也意味着你需要学习很多知识才能用好它，上手并不容易。

即使用它创建简单的图表也可能需要复杂的步骤。你需要明确定义包含图表项和轴在内的所有元素。它提供了一些示例，教你如何使用 CSS 来设置图表元素的样式。开发者无法自动应用基于图表的功能。

如果你想从零开始设计复杂的图表，完全按照自己的想法控制所有元素，那么这个库就是你的首选。但如果时间紧迫，从头开始解决数据可视化项目需求可能就不是什么好主意了。

作为图表库来说，D3.js 可以充当构建块。开发者可以用 D3 与 NVD3 一类的方案配合工作。这个图表库完全免费并开源。

Highcharts

Highcharts 是市面流行的 JavaScript 图表库之一，并被许多大公司采用。为了提供对 IE6 到 IE8 的兼容性，它先使用 SVG 然后转向 VML 来生成图表。它的示例图表带有一些很棒的功能，但看起来不怎么吸引人。它的文档里有很多 API 文档教程和相关主题。

它的 API 易于使用，开发者可以使用配置选项来开发图表。对于个人和非商业用途，Highcharts 可免费使用；证券行业等用途需要商业许可，而甘特图和地图图表则需要单独的许可证。

Chart.js

Chart.js 是一个开源 JavaScript 库，支持 8 种类型的图表。它只有 60kb，是一个非常小的 JS 库。它支持的图表类型包括雷达、内联图表、饼图、条形图、散点图、面积图、气泡和混合等。它还支持时间序列。在呈现层面，它使用 canvas 元素并能响应窗口大小调整缩放比率。它对 IE9 向后兼容。要兼容 IE7 的话也可以使用 Polyfills。

初次使用它的示例时还能看到现代感的初始动画。实时添加数据点或序列时有平滑的动画效果。你可以调用 update() 函数来修改图表选项并重绘图表。

在它的网站中没有展示示例源代码，但可以在 GitHub 仓库中找到。它的 API 简洁直观。用户使用配置选项来创建和修改图表。它的文档内容翔实，附带代码片段和属性 API 的教程。

这个库可免费用于商业和个人用途。它是开源项目。但对于更高级别的需求来说，它提供的图表类型可能有点少。

......

点击“了解更多”，查看全文

介

html2canvas库允许您直接在用户浏览器上截取网页或部分网页的“屏幕截图”。屏幕截图基于DOM，因此它可能不是真实表示的100％准确，因为它没有制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图。目前Github star 17.5K+,可以说非常热门，最新版本1.0.0-rc.3。以上是官网截图：

点击capture按钮效果截图：

工作原理

html2canvas库通过读取DOM以及应用于元素的不同样式，将当前页面呈现为画布图像。它不需要来自服务器的任何渲染，因为整个图像是在客户端的浏览器上创建的。但是，由于它严重依赖于浏览器，因此该库不适合在nodejs中使用。它也不会主动地规避任何浏览器内容策略限制，因此对应呈现跨源内容将需要代理来将内容提供给相同的源。

浏览器兼容性

该库应该可以在以下浏览器上正常工作（使用Promisepolyfill）：

• Firefox 3.5+
• 谷歌浏览器
• 歌剧院12+
• IE9 +
• Safari 6+

由于该库需要手动构建每个CSS属性以支持，因此还有一些尚不支持的属性。

目前不支持这些CSS属性:

• background-blend-mode
• border-image
• box-decoration-break
• box-shadow
• filter
• font-variant-ligatures
• mix-blend-mode
• object-fit
• repeating-linear-gradient()
• writing-mode
• zoom

快速上手

安装

npm install html2canvas
import html2canvas from 'html2canvas';

HTML

<div id="capture" style="padding: 10px; background: #f5da55">
 <h4 style="color: #000; ">Hello world!</h4>
</div>

JavaScript

html2canvas(document.querySelector("#capture")).then(canvas=> {
 document.body.appendChild(canvas)
});

Tips:

html2canvas(element, options), 具体的option如何配置请详细阅读官方文档。