10 个用于创建漂亮图表的 Javascript 库
在本文中,我将向您展示一些用于图形 / 图表的最佳 JavaScript 库。这些库将帮助您为未来的项目创建漂亮且可自定义的图表。
虽然大多数库都是免费和开源的,但其中一些库提供了带有附加功能的付费版本。D3.js - 数据驱动文档
当我们想到今天的图表时,D3.js 是第一个出现的名字。作为一个开源项目,D3.js 肯定会带来许多现有库中缺少的强大功能。“enter and exit”等功能,强大的转换和熟悉 jQuery 或 Prototype 的语法使其成为最佳的图表 JavaScript 库。D3.js 中的图表通过 HTML,SVG 和 CSS 呈现。
与许多其他 JavaScript 库不同,D3.js 不提供任何预先构建的开箱即用的图表。但是,您可以查看使用 D3.js 构建的图表列表以获得概述。Google Chart
Google Charts 是轻松创建图表的首选 JavaScript 库。它提供了许多预先构建的图表,如区域图表,条形图,日历图表,饼图,地理图表等。
Google 图表还附带了各种自定义选项,可帮助您更改图表的外观。使用 HTML5 / SVG 呈现图表,为 iPhone,iPad 和 Android 提供跨浏览器兼容性和跨平台可移植性。它还包括用于支持旧版 IE 的 VML。Highcharts JS
Highcharts JS 是另一个非常受欢迎的图形库。它装载了许多不同类型的炫酷动画,足以吸引许多眼球到您的网站。与其他库一样,Highcharts 附带了许多预先构建的图形,如样条曲线,面积,区域线,柱,条,饼,散点等。
使用 Highcharts JS 的最大优势之一是与旧版浏览器的兼容性 - 甚至可以回溯到 Internet Explorer 6. 标准浏览器使用 SVG 进行图形渲染。在旧版 Internet Explorer 中,使用 VML 绘制图形。
虽然 Highcharts JS 是免费供个人使用,但您需要购买商业用途的许可证。ECharts
商业级数据图表,它是一个纯 JavaScript 的图标库,兼容绝大部分的浏览器,底层依赖轻量级的 canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。amCharts
amCharts 无疑是最美丽的图表库之一。它完全隔离成 3 个独立的图表 - JavaScript 图表,地图图表(amMaps)和股票图表。
amMaps 是我最喜欢的三个。它提供的功能包括在地图上加载图标或照片,热图,绘图线,以及在地图上添加文本,缩放等。
amCharts 使用 SVG 渲染在现代浏览器中工作的图表。
amCharts 具有免费和收费版本。ChartJS
ChartJS 为图表提供漂亮的平面设计。它使用 HTML5 canvas 元素进行渲染。通过 polyfill 添加对 IE7 / 8 等旧版浏览器的支持。
ChartJS 图表默认是响应式的。它们适用于手机和平板电脑。ChartJS 开箱即用了 6 种不同类型的核心图表(核心,条形图,圆环图,雷达图,线图图和极地图),它绝对是近期最令人印象深刻的开源图表库之一。Chartist.js
Chartist.js 提供了漂亮的响应式图表。它使用 SVG 渲染图表。它可以通过 CSS3 媒体查询和 Sass 进行控制和定制。另请注意,Chartist.js 提供的酷炫动画仅适用于现代浏览器。N3-Charts
如果您是 Angular 开发人员,您肯定会发现 n3-charts 非常有用且有趣。n3-charts 建立在 D3.js 和 Angular 之上。它以可定制的 Angular 指令的形式提供各种标准图表。uvCharts
uvCharts 是一个开源 JavaScript 图表库,声称拥有 100 多个自定义选项。它有 12 种不同的标准图表类型。
uvCharts 是使用 D3.js 库构建的。它承诺从 D3.js 中消除所有困难的编码部分,并提供标准图表类型的简单实现。uvCharts 使用 SVG,HTML 和 CSS 呈现。Plotly.js
Plotly.js 是第一个用于 Web 的科学 JavaScript 图表库。它自 2015 年以来一直是开源的,这意味着任何人都可以免费使用它。Plotly.js 支持 20 种图表类型,包括直方图,3d 图,误差线和地图。它还可以执行所有基本图表,如条形图,折线图和馅饼。
Plotly.js 在引擎盖下使用 D3.js,因此它比制作 D3.js 图形更容易,而不是单独使用 D3.js。有关使用 Plotly.js 制作的图表的一些示例,请查看 Plotly 的图表新闻 Feed。