几乎不可能想象没有图形和图表的任何仪表盘. 它们快速有效地呈现复杂的统计数据. 此外, 一个好的图表还可以增强网站的整体设计.
在本文中, 我将向您展示一些用于图形和图表的最佳 JavaScript 库. 这些库将帮助您为将来的项目创建漂亮的, 可自定义的图表.
虽然大多数库是免费的和开源的, 但其中一些库提供了带有附加功能的付费版本.
d3.JS - 数据驱动文档
当我们想到今天的图表时, d3.JS http://d3js.org/ 是第一个出现的名字. 作为一个开源项目, d3.JS 无疑带来了许多功能强大的特性, 这些特性在大多数现有库中都是缺失的. 动态属性 https://d3js.org/#properties , 进入和退出 https://d3js.org/#enter-exit , 强大的转换 https://d3js.org/#transitions 和对 jQuery 语法的熟悉等特性使它成为绘制图表的最佳 JavaScript 库之一. d3.JS 中的图表通过 html,SVG 和 CSS 呈现.
与其他许多 JavaScript 库不同, d3.JS 不附带任何现成的预构建图表. 但是, 您可以查看使用 d3.JS 构建的图表列表 https://github.com/mbostock/d3/wiki/Gallery , 以获得概述. 如您所见, d3.JS 支持各种各样的图表类型.
初学者的一个缺点可能是学习曲线陡峭, 但是有很多教程和资源可以帮助您开始学习.
d3.JS 不能很好地与 IE8 这样的老浏览器配合使用. 但是, 为了跨浏览器的兼容性, 您可以始终使用像 aight plugin https://github.com/shawnbot/aight 这样的插件.
如果你想学习 d3.JS, 我们有一本关于 d3 数据可视化的书.
Google 图表
对于不需要复杂定制的简单项目, Google 图表 https://developers.google.com/chart/ 是一个很好的选择. 它提供许多预构建的图表, 如面积图, 条形图, 日历图, 饼图, 地理图等. 所有图表都是交互式的, 您可以在几分钟内将其添加到页面中.
Google 图表还提供了各种定制选项, 有助于改变图表的外观. 使用 HTML5/SVG 呈现图表, 为 iPhone,iPad 和 Android 提供跨浏览器兼容性和跨平台可移植性. 它还包括支持旧 IE 版本的 VML.
这是使用 Google 图表构建的一个很好的示例列表.
ChartJS
ChartJS https://www.chartjs.org/ 为图表提供漂亮的平面设计. 它使用 HTML5 Canvas 元素进行渲染, 并支持所有现代浏览器(IE11 +).
ChartJS 图表默认是响应式的. 它们适用于手机和平板电脑. 开箱即用的有 8 种不同类型的图表(线条, 条形图, 雷达图, 圆环图和饼图, 极区, 气泡图, 散点图, 区域图), 以及混合它们的能力. 所有图表都是动画和可自定义的.
这是使用 ChartJS 构建的示例列表 https://www.chartjs.org/samples/latest/ .
Chartist.JS
Chartist.JS http://gionkunz.github.io/chartist-js/ 提供了漂亮的响应式图表. 就像 ChartJS 一样, Chartist.JS 是社区的产物, 它使用价格高昂的 JavaScript 图表库而感到沮丧. 它使用 SVG 渲染图表. 它可以通过 CSS3 媒体查询和 Sass 进行控制和定制. 另请注意, Chartist.JS 提供的酷炫动画仅适用于现代浏览器.
你可以在 Chartist.JS 示例页面上浏览和玩不同类型的图表. 图表是交互式的, 您可以动态编辑它们.
Recharts
Recharts http://recharts.org/en-US/ 是一个可组合的图表库, 用于构建具有分离的, 可重用的 React 组件的图表. 它建立在 SVG 元素和 D3.JS 之上. 查看示例列表 http://recharts.org/en-US/examples .
n3-charts
如果您是 Angular 开发人员, 您肯定会发现 http://n3-charts.github.io/line-chart 非常有用且有趣. n3-charts 建立在 D3.JS 和 Angular 之上. 它以可定制的 Angular 指令的形式提供各种标准图表.
查看使用 n3-charts 构建的图表列表 http://n3-charts.github.io/line-chart/#/examples .
Ember Charts
Ember Charts 是另一个使用 D3.JS 和 Ember.JS 构建的优秀开源库. 它提供了易于定制的时间序列, 条形图, 饼图和散点图. 它使用 SVG 来渲染图表.
ZingChart
ZingChart https://www.zingchart.com/ 提供灵活, 互动, 快速, 可扩展和现代化的产品, 可快速创建图表. 他们的产品被 Apple,Microsoft,Adobe,Boeing 和 Cisco 等公司使用, 并使用 Ajax,JSON,HTML5 快速提供外观精美的图表.
ZingChart 提供超过 35 种响应式图表类型和模块, 它们还可以实时显示数据. 它们可以通过 CSS 进行样式设置和主题化, 并且可以快速呈现大数据.
你可以查看他们丰富的例子 https://www.zingchart.com/gallery/ .
一个带有所有图表的品牌版本可以免费试用, 但是对于无水印输出, 您需要根据您的业务规模购买 Zingchart 的一个付费许可证.
Highcharts
Highcharts https://www.highcharts.com/ 是另一个非常受欢迎的图形库. 它装载了许多不同类型的炫酷动画, 足以吸引许多眼球到你的网站. 与其他库一样, Highcharts 附带了许多预先构建的图形, 如样条曲线, 面积, 区域线, 柱, 条, 饼图, 散点图等. 图表具有响应性和移动就绪功能. 此外, Highcharts 还提供了一些高级功能, 例如在图表中添加注释.
使用 Highcharts 的最大优势之一是与旧版浏览器的兼容性 - 甚至可以回溯到 Internet Explorer 6. 标准浏览器使用 SVG 进行图形渲染. 在旧版 Internet Explorer 中, 使用 VML 绘制图形.
大多数流行语言 (.NET,PHP,Python,R 和 Java) 和框架 (Angular,vue 和 React) 以及 iOS 和 Android 都有包装器.
虽然 Highcharts 是免费供个人使用, 但您需要购买商业用途的许可证.
FusionCharts
FusionCharts https://www.fusioncharts.com/ 是最古老的 JavaScript 图表库之一, 早在 2002 年就已发布. 拥有超过 100 多个图表和 1400 多张地图, 很容易说 FusionCharts 是最全面的 JavaScript 图表库. 它提供了与所有流行的 JavaScript 框架和服务器端编程语言的集成. 使用 HTML5 / SVG 和 VML 呈现图表以获得更好的可移植性和与旧版浏览器的兼容性 - 甚至可以回到 Internet Explorer 6. 这种向后兼容性使其成为很长时间以来非常受欢迎的选择. 您可以导出 JPG,PNG,SVG 和 PDF 格式的图表.
您可以在个人项目中免费使用加水印版本的 FusionCharts. 但是, 您需要购买商业许可证才能删除水印.
Flot
Flot http://www.flotcharts.org/ 是一个用于 jQuery 的 JavaScript 图表库. 它也是最古老和最受欢迎的图表库之一.
Flot 支持线, 点, 填充区域, 条以及这些的任何组合. 它也兼容旧的浏览器 -- 回到 IE6 和 Firefox 2.
Flot 完全免费使用. 下面是使用 Flot 创建的示例图列表 https://www.flotcharts.org/flot/examples/ .
amCharts
amCharts https://www.amcharts.com/ 无疑是最漂亮的图表库之一. 它同时提供了图表和地理地图(Map Chart), 支持高级数据可视化.
地图图表 https://www.amcharts.com/javascript-maps/ 包非常令人印象深刻. 它允许您用几行代码创建各种交互式地图. 这个包提供的一些重要功能包括地图投影, 坐标转换和热图. 有很多捆绑的地图, 你也可以自己做.
amCharts 使用 SVG 呈现可以在所有现代浏览器中工作的图表. 它提供了与 TypeScript,Angular,React,Vue 和普通 JavaScript 应用程序的集成.
查看这个用 AMCharts 创建的精彩演示集 https://www.amcharts.com/demos/ .
amChart 的免费版本会在每个图表的顶部留下一个指向其网站的反向链接.
EJSCharts
EJSCharts http://www.ejschart.com/index.php 是一个用于家庭和企业数据表示和定制的开源解决方案. 图表清晰, 可读, 互动. EJSCharts 与旧版浏览器兼容, 返回 IE6. 查看此示例列表 http://www.ejschart.com/examples.php .
uvCharts
http://imaginea.github.io/uvCharts/ 是一个开源 JavaScript 图表库, 声称拥有 100 多个自定义选项. 它有 12 种不同的标准图表类型.
uvCharts 是用 D3.JS 构建的. 它承诺从 D3.JS 中消除所有困难的编码部分, 并提供标准图表类型的简单实现. uvCharts 使用 SVG 和 HTML5 呈现, 因此它仅适用于现代浏览器.
Plotly.JS
Plotly.JS https://plot.ly/javascript/ 是第一个用于 web 的科学 JavaScript 图表库. 它自 2015 年以来一直是开源的, 这意味着任何人都可以免费使用它. Plotly.JS 支持 20 种图表类型, 包括 SVG 地图, 3D 图表和统计图表. 它建立在 D3.JS 和 stack.gl https://github.com/stackgl 之上.
CanvasJS
CanvasJS https://canvasjs.com/ 是一个响应式 HTML5 图表库, 具有高性能和简单的 API. 它支持 30 种不同的图表类型 (包括线, 列, 条, 区域, 样条, 饼图, 圆环图, 堆积图等), 这些图表都有详细记录. 所有图表都包含工具提示, 缩放, 平移, 动画等交互式功能. CanvasJS 可以与流行的框架(Angular,React 和 jQuery) 和服务器端技术 (PHP,Ruby,Python,ASP.NET,Node.JS) 集成. ,Java).
这是 CanvasJS 图表示例的交互式集合 https://canvasjs.com/javascript-charts/ .
TOAST UI Chart
TOAST UI Chart https://ui.toast.com/tui-chart 是一个开源 JavaScript 图表库, 支持包括 IE8 在内的旧版浏览器. 它包括所有常见的图表类型和地图, 可以使用用户定义的主题进行自定义. 图表也可以组合在组合图表中, 例如带有线的列或带有区域的线等. 查看完整的示例列表.
AnyChart
AnyChart 是一个轻量级且功能强大的 JavaScript 图表库, 其图表旨在嵌入和集成. AnyChart 允许您开箱即用地显示 68 个图表, 并提供创建自己的图表类型的功能. 您可以将图表另存为 PDF,PNG,JPG 或 SVG 格式的图像.
AnyChart 为用户提供了五种类型的资源来学习库(文档, API 参考, Playground,Chartopedia 和 FAQ).
您可以在注册后免费下载水印版本. 但是, 为了摆脱品牌并将 AnyChart 用于商业目的, 有必要购买许可证.
结论
现在取决于您为未来的项目选择最好的图表库. 想要完全控制图表的开发人员肯定会选择 d3.JS. 几乎所有上述库都通过堆栈溢出论坛获得了良好的支持.
来源: http://www.css88.com/web/javascript/10488.html