整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
个企业在做重要决定时都倾向于做数据分析，实际上他们很多时候都是沉沦在数据里头，不知道如何跳出其中。企业一直寻求更好的方式来可视化数据、进行更好的互动、使图表多角度化。毕竟，只有从数据中得出的见解才是有用的。
JavaScript 图表库出现了，作为美观且容易理解的交互式的可视化图表最有力的工具，它更容易提取和传达关键的模式和见解，而这一点在静态图表中往往不明显。
为了使事情更加简单，我努力挖掘了很多选项，找到了最好的JavaScript 图表库。来，让我们开始吧。
1、chartist
Chartist的高效和人性化设计甚至吸引了离开 Excel 就会感觉不舒服的人。可响应（使用媒体查询）和独立 DPI 意味着这些图表可以为你提供一个良好的解决方案，如果你在考虑将你的图表应用于包括手机，平板和桌面电脑的多终端设备，基于SVG的设计让它在未来更具兼容性。
Chartist 的与众不同在于它是社区的成果，这使得它没有其他图表库的局限性。由于过于关注琐碎的变动和功能完整，导致你在使用其他类库时很焦心。
协议: 开源，所有用户皆可免费使用。
2、FusionCharts
FusionCharts带来了最全面的库，超过90种图表和900种图——所有均就绪备用。它们自诩为行业内最好看的图表，它提供了一个功能强大的体验仪表板，通过它可以鸟瞰其整个业务功能。
FusionCharts 兼容从 PC 和 Mac 电脑，iPhone 和 Android 平板电脑等多种设备；他们做了许多额外的努力来确保跨浏览器的兼容性，甚至包括 IE6！
他们还涵盖了所有基础格式 —— JSON 和 XML 数据格式都能够接受；绘制可以通过 HTML5、SVG 和 VML，图表可以导出为 PNG、JPG 或 PDF 格式。FusionCharts 的扩展可以很容易地与你所选择的任何技术集成，包括 jQuery，AngularJS，PHP 和 Rails。
总的来说，FusionCharts 拥有你创建漂亮图表和做严格业务分析所需的任何特征和格式。而且最好的部分是非商业用途时你可以免费下载并使用，没有任何限制。
源码许可证：非商业免费，商业用途收费。
3、DyGraphs
Dygraphs 是一个开源的 JavaScript 图表库，最适用于极端大数据集。它是开箱式互动，通过缩放甚至可以支持手机。
它既兼容主流浏览器，也向后兼容 IE8。选项和自定义回调功能使它具有极高的可配置性。
协议: 开源，面向所有用户免费。
4、Chartjs
Chart.js适用于小项目，扁平化，干净，优雅，快速。它是一个微型的开源库，最小化压缩后只有11kb大小。它包括六个核心图表类型（线图，柱图，雷达图，极地图，饼图和环形图），每个都是独立的模块，所以你甚至可以只加载项目需要的模块以最大化缩小代码占用空间。
它使用HTML5 canvas元素渲染图表，并且使用polyfills方式兼容在IE7/8上运行。所有图表都是可响应的。
协议: 开源，面向所有用户免费。
5、GoogleCharts
Google Charts 提供大量不同种类的图表，它最大程度上满足了数据可视化的需要。图表基于 HTML5/SVG，为了兼容老版本的 IE 还支持 VML。所有的图表都是可交互可缩放的。你可以去看看他们的图表库。最棒的是他们的图表绝对免费。
协议：免费，但是不开源，在你的服务器上使用他们的 JS 文件是 Google’s协议不允许 的。因此如果你是一家企业并且有很多敏感数据，Google Charts 可能不是一个最佳的选项。
6、HighCharts
Highcharts 是又一个流行的交互图表库，与其他库一样，它是基于 HTML5/SVG/VML，所以不需要扩展插件。提供的图表类型很广泛，像曲线图，柱状图，条形图，地图，仪表盘等。
它还提供个人用户免费可在线生成交互式图表的接口 Highcharts cloud，商业使用需要购买授权。
协议: 非商业使用免费，商业使用付费。
7、Flot
Flot 是最古老的图表库之一，用法简单并聚焦交互特性。它是特定的 jQuery 库，这意味着使用它需要熟悉基础的 jQuery。但是从另一方面来说，这意味着你可以全面控制呈现，动作和用户交互。
Flot 兼容大多数浏览器，向下兼容到 IE6。Flot 的插件库提供许多类型的图，所有贡献都是社区提供的。你可以看看这些由 Flot 制作的例子。
协议: 开源，面向所有用户免费。
8、D3.js
D3通常是提到数据可视化时出现的第一个名字。它是一个非常强大的开源项目，可以通过动态更新DOM创造出惊人的视觉效果和图形。另外，它使用HTML，CSS和SVG。
它符合W3C标准，并且是跨浏览器兼容的。开发者们往往喜欢它所带来的许多特征，比如“进入和退出”以及强大的过渡。你可以到这里找到一些 D3 的示例。
需要说明的是，它没有预建图表，即时学习基本的图表也有一条非常陡峭的学习曲线。但开发者们极富创新性，开发出了不少基于D3的包装库。后面我们将涉及到其中的一些佼佼者。
源码许可证: 开源。免费使用。
9、n3-charts
如果你正在寻找一种在 AngularJS 应用下创建简单互动线图的方法，这将是你所需要的。N3 基于D3.js，针对少量受众–基于 AngularJS 绘制通用线图。如果你需要更多的图表类型，它可能不适合你。你可以在这里看到一些N3线图的实例。
源码许可证：开源。对所有人免费。
10、NVD3
NVD3是一个旨在建立可复用的图表和组件的 d3.js 项目——它提供了同样强大的功能，但更容易使用。它可以让你处理复杂的数据集来创建更高级的可视化。
源码许可证：开源。对所有人免费。
11、Ember Charts
Addepar 的开发者正为提升 Ember 以及其附属库 Ember Charts、Ember Tables 和 Ember Widgets 的体验的工作而稳步推进着。Ember Charts 基于 D3.js 和 Ember.js 框架提供了一个易于使用的，可扩展的图表套件。
其强壮且优雅——针对坏数据的错误处理能确保有坏数据时应用程序不会崩溃。你甚至可以通过扩展它来创建自己的图表类型。
源码许可证：开源。对所有人免费。
12、jQuery Sparklines
我们一直在谈论那些能搞定一切的重量型的库。但有时你需要的是针对简单的任务简单些的东西。jQuery Sparklines 插件提供了一个合适的解决方案。它能够被用来生成迷你型的小内嵌图表，刚好足够去表现趋势——只需要最小量的编码。适用于大多数现代浏览器包括更老的IE6。
源码许可证：开源。对所有人免费。
13、Sigma.js
当我们在特定的使用场景下时，我们必须谈谈 Sigma。Sigma 是一个强大的 JavaScript 库，其关注于呈现交互图形和 Web 网络。
Sigma 的库和插件包有大量的互动设置。一旦你使用了 Sigma，你将再也不会觉得线图无聊。看一下这个sigma.js侧翻演示你就会明白我的意思。
源码许可证：开源。对所有人免费。
14、Morris.js
是的，正如 Morris 所说，好看的图不应该制作困难。Morris 是一个基于 jQuery 和 Raphael 的轻量级库，它提供简单干净的线条，面积图，条形及圆环图。如果你正在寻找一些快速简单且优雅的库，它绝对值得一试。
源码许可证：开源。对所有人免费。
15、Cytoscape.js
Cytoscape.js 是一个开源的、功能齐全的图形库，它纯粹用 JavaScript 编写，基于 LGPL3+ 并完全免费。经过高度优化之后，它并不依赖外部。Cytoscape.js 可以让你创建可复用的图形工具，并能够集成到你的 JavaScript 代码中。
它同样兼容所有现代浏览器，还兼容各种软件框架，比如CommonJS和Node.js，AMD/Require.js，jQuery 以及 Meteor/Atmosphere 等。注意，虽然它与Cyctoscape 桌面应用名字相同，但它们是完全不同的。
源码许可证：免费。对所有人免费。
16、C3.js
C3.js 是另一个基于 D3 可重用的图表库。大量的基于 D3 的图表工具表明了太多人喜欢 D3 的功能，但也反映了大家讨厌用 D3 直接编码。
C3.js 提供了一种不同于 D3 学习曲线的方法，它将构建整个图表所需要的代码进行了包装。C3允许你创建自定义的类，这样就可以生成自己的风格。它提供了大量的API和回调，以便你可以在第一次渲染之后更新图表。
源码许可证：开源。对所有人免费。
17、Rickshaw
Rickshaw 在 Shutterstock 被开发为一个建时间序列图的工具包。像其他一些我们已经讨论过的工具一样，Rickshaw 也是基于 D3 库。它是开放并开源的（遵循 MIT 许可）。
你可以在这里看到一些 Rickshaw 的有趣例子。Rickshaw 的众多扩展和自定义的特性能够让你生成漂亮的时序图。
源码许可证：开源。对所有人免费。
18、Cubism.js
Cubism 也许是显示时间序列最佳的 D3 插件。是什么使它脱颖而出的呢？你可以引入多个来源的数据，比如 Graphite、Cube 和其他来创造令人敬畏的实时图表来展现你的数据。
它能够渲染增量，使用 Canvas 来一次一个像素的偏移图表。Cubism 的水平图要比标准的平面图更好地利用垂直空间，能够让你一眼下来获取更多的数据并增加一目了然的可能性。
源码许可证：开源。对所有人免费。
19、Plottable.js
Plottable 采取了一些不同于 D3 框架的方法。它已经有一套可插拔的模块化组件，这些组件封装了渲染逻辑。这形成了一个单独的布局引擎用来实际定位。
这意味着你可以使用任何 Plottable 的组件并将其添加到现有的图表，或使用 Plottable 创建一个全新的图表。它基本以一个更模块化、即插即用的方式赋予了你 D3 的力量。可以通过这些示例看一下 Plottable 的能力。
源码许可证：开源。对所有人免费。
20、Canvas.js
正如名字所隐含的，Canvas.js 是一个 HTML5 —— JavaScript 的图表库，基于 Canvas 元素。Canvas 允许你创建完全响应式且跨设备的丰富图表。除此之外，它有许多很好看的主题，他们声称要比传统的基于 Flash 和 SVG 图型快10倍。
源码许可证：非商业免费，商业用途收费。
总结
数据的可视化和分析是当今业务流程的的一个重要的组成部分。公司不论大小，都需要简洁、高效、互动性的方式来诠释数据。所以选择适合你需求的 JavaScript 图表库尤为重要。
像 FusionCharts，GoogleCharts，Dygraphs 或 D3 的衍生库可能更适合那些处理大量数据的企业，或那些很大程度上依赖于数据分析的小公司。如果你只需要一些小而快的库，Morris.js 或 Chart.js 或许更适合你。对于图形和和网络，Cytoscape 或 Sigma.js 可能是更好的选择。
我尽量将最好的工具包括在这里，但我相信你也有你的最爱，你最喜欢的 JS 图表库是哪个，为什么？
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
一、数据源
数据源格式如下图，每一行为各地的GDP及三产业数据，A列作为辅助区域（由C列和B列合并而成）。
二、制作选择器
以地区作为筛选字段。
1、插入数据透视表
选择数据源A:G列，插入数据透视表到新工作表的P1单元格。将[地区]字段拖拽到[行区域]。再隐藏数据透视表的字段标题、禁用行和列的总计。
2、设置选择器
在菜单栏[开发工具]的[插入]命令中选择[列表框]控件，在单元格L8画出一个列表框。
用鼠标右键单击列表框，在弹出的快捷菜单单击[设置控件格式(F)]，进入[设置对象格式]对话框，将[数据源区域]设置为数据透视表所在的区域P1:P32，将[单元格链接]设置为存放选择结果的单元格N2，单击[确定]按钮。
三、数据辅助区域
1、年份
第一行为年份，在K1单元格输入最近的年份后，其他左侧单元格自动依次递减。
在J1单元格输入公式：=K1-1。并将公式复制到B1:I1区域。
2、地区（省份）
根据选择结果（N2单元格），将地区引用到A1单元格。则在A1单元格输入公式：=INDEX(P1:P32,N2)。
3、按条件提取数据
在B2单元格输入公式：=VLOOKUP(B&$A1,各省GDP!$A:$D,4,0)，并将公式复制到C2:K2数据区域。将选定区域对应年份的数据提取到辅助区域。
在A4单元格分别输入第三产业。在其右侧单元格输入公式。
在B4单元格输入公式：=VLOOKUP(B&$A,各省GDP!$A:$G,7,0)
再将B4:B4数据区域的公式复制到C4:K4，将选定区域对应年份第三产业数据提取到辅助区域。
在B3单元格输入公式：=B4/B2，并将公式复制到C3:K3，计算出第三产业占比。
四、制作图表
1、插入折线图（按年趋势图）
选中A2:K3数据区域，插入[带数据标记的折线图]，[水平(分类)轴标签]选择B1:K1数据区域。
将系列[GDP]设置为[次坐标轴]。
2、设置图表格式：
①图表名称=A1单元格；
②主坐标轴最小值设置为0，最大值设置为1；
③图例靠上显示，与图表重叠。
五、导出图表（VBA）
通过VBA编写代码循环改变区域，实现对数据的动态引用，并将图表导出到文件夹。
1、参数区域
将N7单元格作为参数区域，通过更改参数，可以设置图表导出的文件夹。
2、VBA代码
新建export_chart4模块，键入以下代码。
3、制作按钮
在菜单栏[开发工具]的[插入]命令中选择[按钮]控件，在N11单元格插入一个按钮，命名为[导出图表]，并指定宏为export_chart4。
4、导出图表
点击[导出图表]按钮将图表导出的文件夹。
六、Web页面（html）
1、html代码
在存放图片文件夹的上一级文件夹中新建show.html文档，用编程软件（比如Visual Studio Code）打开，键入以下代码。
2、本地网页演示
在show.html文档所在文件夹，直接打开网页。
3、手机网页演示
如果电脑装了网络服务器，可以在同一局域网的电脑或手机中，打开浏览器输入网址打开网页，就能看到动态图表滚动显示。
可以使用JavaScript在浏览器中渲染任何您想要的内容。这个很好的示例是这个在线建模工具列表，它可以帮助您直接在浏览器中轻松创建UML（或ER，BPMN等）图。这些工具中的大多数都使用 JavaScript 来渲染图形形状并与之交互。但是，如果您想创建自己的图表或构建自己的编辑器怎么办？别担心，我们为您提供保障。在这篇文章中，我们提供了一个 10+ JavaScript 绘图库的列表，用于编写您自己的可视化工具和/或为您的软件添加一些图形建模功能。
我们将 JavaScript 绘图库集分为两个主要类别：
简而言之，如果您正在寻找一种几乎现成的方法来将 JavaScript 建模库集成到您的工具中，请选择第一组中的库。如果您正在寻找一个更可调的解决方案，并且有时间和技能进行一些编程，请考虑从第二组中获取一个库并根据需要对其进行个性化设置。请注意，我们专注于绘制图表的库，如果您只想渲染只读图表，您可能需要查看此文本建模工具列表。
用于绘制UML（或BPMN或ERD）图的JavaScript库
JointJS可用于创建静态图或完全交互式的图工具和应用程序构建器。它还有一个商业版本（Rappid，见下文）
以下是它的一些功能：
Rappid是JointJS的商业扩展。它是一组 JointJS 插件和其他组件，在创建图表工具时提供了更多可能性和即用型功能。以下是它的一些功能：
MxGraph 是一个交互式 JavaScript HTML 5 图表库。mxGraph 是一个完全客户端的库，它使用 SVG 和 HTML 来渲染模型。例如，该库用于 Draw.io。开发始于 2005 年，虽然原始项目已存档，但这个分支仍在继续工作。
mxGraph 不使用第三方软件，它不需要插件，几乎可以集成到任何框架中。mxGraph 包包含一个用 JavaScript 编写的客户端软件，以及一系列用于各种语言的后端。客户端软件是一个图形组件，带有集成到现有 Web 界面中的可选应用程序包装器。客户端需要 Web 服务器将所需的文件传送到客户端，或者可以在没有 Web 服务器的情况下从本地文件系统运行。后端可以按原样使用，也可以以受支持的语言之一嵌入到现有服务器应用程序中。
GoJS是一个功能丰富的JavaScript / Typescript库，用于跨现代浏览器和平台实现交互式图表。GoJS 通过可自定义的模板和布局可以轻松构建复杂节点、链接和组的图表。
GoJS 为用户交互提供了许多高级功能，例如拖放、复制和粘贴、事务状态和撤消管理、调色板、概述、数据绑定模型、事件处理程序以及用于自定义操作的可扩展工具系统。它们提供了 150 多个交互式示例，可帮助您开始使用 BPMN、流程图、状态图、可视化树、Sankey 和数据流等图表。该 API 有很好的文档记录，以确保您可以立即开始使用。我们在这篇文章中广泛介绍了GoJS。
用于 UML2 图表的 HTML5/javascript 库。它的主要目标是为Web开发人员提供一种简单的方法来可视化和编辑UML模型，在我们自己的网站中，没有其他外部依赖项，并且通过浏览器在客户端完全可执行，与此列表中的其他工具不同。jsUML2 库提供了一个 API，允许 Web 开发人员使用最新的 Web 浏览器以及当前移动设备支持的 HTML5 技术在自己的网站中包含可编辑的图表。
它为特定于 UML 的模型提供了广泛的有趣功能。特别是，它支持所有主要的UML类型的图：
支持图表元素（大小，位置，颜色等）的样式版本，构造型定义，将UML图表导入/导出到XML和图像生成。
该工具已于 2017 年停产，但对于所有寻找 UML JavaScript 库的人来说，它仍然是一个强大的选择。
图表工具是100%用JavaScript编写的，并使用HTML5 Canvas元素进行绘制。该组件可以使用jQuery或Microsoft Ajax?库进行浏览器独立层和类型系统实现。
它带有一组丰富的预定义形状（用于工作流图、流程架构、类图、树,...检查他们的样本集合）以及定义自己的形状和自定义选项（例如箭头形状）的可能性。为了方便 API 的使用，他们对其进行了大量记录。您还可以使用自动图形布局算法。
Nomnoml 是一个较有名的文本建模工具，能够从文本描述中渲染 UML 图，但它也提供了一个独立的 JavaScript 库，可用于在自己的网页上呈现图。唯一的依赖关系是 lodash 和 dagre。
与nomnoml类似，Mermaid的主要重点是从文本文件生成图表，在这种情况下，通过简单的类似markdown的脚本语言。它依赖于 d3 和 dagre-d3 来提供图形布局和绘图库。它提供了一个在线编辑器，但您也可以直接重用打包的美人鱼 API 将美人鱼集成到您自己的开发中。它主要涵盖序列图和流程图。
用于创建和显示图表的核心库。它被 BPMN.io（此库的创建者）用作同一公司许多其他库的构建块，用于指定业务流程模型、决策模型和案例计划模型。
例如，bpmn-js 是渲染 BPMN 2.0 图的.js扩展。除了使用它来构建工作流建模编辑器（正如他们已经提供的那样）之外，bpmn-js 在设计时还考虑了可扩展性，因此您可以“轻松”构建某种执行/模拟引擎，例如，在其上构建某种执行/模拟引擎。
顾名思义，state.js 专注于对分层状态机进行建模。状态.js API 提供：
它是用TypeScript开发的，并转译为JavaScript;您可以使用任何一种语言。 : .
Eclipse Sprotty 和 Eclipse GLSP 工具可帮助您为自己的语言创建建模环境。因此，它们不限于UML，ER或其他特定的图表类型。相反，这些工具提供了一个后端基础结构（基于语言服务器协议的图形化），以创建您自己的语言，并提供一个基于 JS 的前端来为其构建可视化编辑器。
提供面向图形的建模基元的低级库（因此，我们在这里不列出只专注于绘制数据可视化图表的库）。事实上，其中一些已被用于构建上面列出的JavaScript建模库。
D3.js 是一个 JavaScript 库，用于基于数据操作文档。现在，我会说是同类库中最受欢迎的图书馆。
D3 可帮助您使用 HTML、SVG 和 CSS 使数据栩栩如生。D3 对 Web 标准的强调为您提供了现代浏览器的全部功能，而无需将自己绑定到专有框架，将强大的可视化组件和数据驱动的 DOM 操作方法相结合。D3 速度极快，支持大型数据集以及交互和动画的动态行为。D3 的函数式风格允许通过各种官方和社区开发的模块重用代码。
Rapha?l 是一个小型的 JavaScript 库，它应该可以简化您在 Web 上使用矢量图形的工作。例如，如果您想创建自己的特定图表或图像裁剪和旋转小部件，则可以使用此库简单轻松地实现它。Rapha?l 使用 SVG W3C 推荐和 VML 作为创建图形的基础。这意味着您创建的每个图形对象也是一个 DOM 对象，因此您可以附加 JavaScript 事件处理程序或稍后修改它们。Rapha?l的目标是提供一个适配器，使绘制矢量艺术兼容跨浏览器且容易。它最近没有更新。
使用 Draw2D Javascript 库创建类似 Visio 的绘图、图表或工作流编辑器。用户界面允许使用标准浏览器进行交互式绘图。它声称比拉斐尔简洁得多。即使开发停滞不前，甚至还有一个演示页面。
Fabric 是一个 JavaScript HTML 画布库，在 canvas 元素之上提供了一个交互式对象模型。您可以在画布上创建和填充对象;对象，如简单的几何形状或由多个路径组成的复杂形状。Fabric 还具有 SVG 到画布（和画布到 SVG）解析器。
Paper.js 是一个运行在 HTML5 Canvas 之上的开源矢量图形脚本框架。它提供了一个干净的场景图/文档对象模型和许多强大的功能来创建和处理矢量图形和贝塞尔曲线，所有这些都整齐地包装在一个精心设计、一致和干净的编程界面中。它基于（并且在很大程度上兼容）Scriptographer，Scriptographer是Adobe Illustrator的脚本环境。
jsPlumb 提供了一种以可视化连接为核心构建应用程序的快速方法。s.它使用 SVG 并在 IE9 及更高版本的所有浏览器上运行。JsPlumbToolkit是其商业扩展。此商业版本包装了社区版，重点关注基础数据模型，以及几个有用的 UI 功能，例如布局和提供平移/缩放功能的小部件。
一个 JS 客户端库，用于创建图形和交互式体验，基于处理的核心原则，使艺术家、设计师和教育工作者可以访问编码。除了绘图之外，该项目还提供网络音频功能，碰撞检测，甚至从p5.js草图生成图形用户界面。
高度优化的开源图论网络库，可用于图分析和可视化。与所有现代浏览器兼容，并且可通过 JSON 完全（反）序列化。它还包括自动布局，集合论和图论的算法，从BFS到PageRank。
一个JavaScript库，充当dagre（在客户端布置有向图的javascript库）的前端，使用D3提供实际的呈现。该项目现已放弃。
Vis.js 是一个基于浏览器的动态可视化库。该库设计为易于使用，可处理大量动态数据，并可对数据进行操作。这个项目也被放弃了。
React Diagrams 是一个“一个超级简单、严肃的图表库，用 react 编写，只是工作”。它是一个专注于可视化流程和面向流程的图表的库。灵感来自Blender、Labview和虚幻引擎。
它完全用 Typescript 和 React 编写。它是完全可扩展的，整个库（包括其核心）可以扩展，重新布线并重新组装成根本不同的软件，以满足您自己的软件需求。它还旨在提供良好的用户体验，但确保设计人员可以尽快编辑图表。
Tldraw是此列表中的最新条目之一。Tldraw是一个“微小的绘图应用程序”，提供了许多形状来绘制简单，但清晰和优雅的图表，具有手绘风格和方便的功能，如智能箭头，捕捉和便笺。甚至还有一个VSCode扩展。
*请认真填写需求信息，我们会在24小时内与您取得联系。
