整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
GitHub精选》是我们分享Github中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是基于python一个的2D、3D图表库——pyecharts。
Pyecharts是一个由百度团队基于Python和html研发的图表库，包含基本的柱状条形图、折线面积图、漏斗图、旭日图，以及3D的柱状图、折线图、散点图、地图等等，囊括了 30+ 种常见图表。
特点：
示例：
柱状图
热力图
旭日图
3D柱状图
3D折线图
三维地图①
三维地图②
快速上手：
pip安装
$ pip(3) install pyecharts源码安装
$ git clone https://github.com/pyecharts/pyecharts.git
$ cd pyecharts
$ pip install -r requirements.txt
$ python setup.py install
# 或者执行 python install.pyfrom pyecharts.charts import Bar
bar=Bar()
bar.add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
bar.add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
# render 会生成本地 HTML 文件，默认会在当前目录生成 render.html 文件
# 也可以传入路径参数，如 bar.render("mycharts.html")
bar.render()#所有方法均支持链式调用
from pyecharts.charts import Bar
bar=(
Bar()
.add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
.add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
)
bar.render()from pyecharts.charts import Bar
from pyecharts.render import make_snapshot
# 使用 snapshot-selenium 渲染图片
from snapshot_selenium import snapshot
bar=(
Bar()
.add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
.add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
)
make_snapshot(snapshot, bar.render(), "bar.png")from pyecharts.charts import Bar
from pyecharts import options as opts
# 内置主题类型可查看 pyecharts.globals.ThemeType
from pyecharts.globals import ThemeType
bar=(
Bar(init_opts=opts.InitOpts(theme=ThemeType.LIGHT))
.add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
.add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
.add_yaxis("商家B", [15, 6, 45, 20, 35, 66])
.set_global_opts(title_opts=opts.TitleOpts(title="主标题", subtitle="副标题"))
)以上就是pyecharts的简单使用，如果你想实现更多炫酷的样式，pyecharts同样也提供了多种内置主题，感兴趣的同学可以了解一下。
GitHub：https://github.com/pyecharts/pyecharts
往期推荐：
机器学习入门教程tutorials
零代码搭建多种主题的个人博客
程序员通用简历模板ResumeSample
互联网公司常用框架和中间件源码解析
作者 | 董叶
公司决策层会围绕着数据来制定相应的策略，数据的重要性与日俱增，政府、金融机构、互联网大厂正在以前所未有的速度收集数据，面对扑面而来的数据，没有抽象、视觉层的帮助，我们很难快速理解掌握其中信息，正确的图形工具往往是致胜的关键
对于JS开发人员而言，数据可视化能力和开发网页一样重要，特别是需要将两者结合起来的时候，在大数据时代，在网页中显示数据统计图表，从而能很直观地了解数据的走向。
随着JavaScript 在数据可视化方向的日益普及，涌现出一大批JavaScript图形库为前端网页创建精美的图表，但是如何选择合适JavaScript 图形库需要考虑许多因素：
1 想构建什么样的图表？饼图、地图、线条、条形图？
2 数据集有多大？ 基于 SVG 的库通常更适合中小型数据集，基于Canvas 则是大型数据集更可靠的选择。
3 应用程序是用于Web、移动还是两者兼而有之？
4 使用的JavaScript 框架？
5 何时使用对应的图形库？ 如果是自有研发，前期成本高，但是后期可塑性强。
百度和谷歌都开发了对应的图形库，Echart、Google Charts , 以下介绍的几款图形库有着各自不同的特点。
D3是最受欢迎的JS图形库之一，不仅用于数据可视化，还用于动画、数据分析、地理和数据实用程序。
通过HTML、SVG和CSS将数据鲜活形象地展示出来，它的所有操作都是真实的DOM操作，是和React或Vue 等现代前端框架完全不同的思路， 基于一整套数据到SVG属性的计算框架和丰富的工具包， 即使不理解SVG属性计算公式的程序员也能轻松将数据转换成想要的SVG属性。
D3 解决问题核心是基于数据的高效文档操作。提供了非凡的灵活性。
使用最小的开销，使得D3的速度非常快，支持大型数据集以及交互与动画的动态行为。
D3的函数风格允许通过各种组件和插件的形式进行代码的重用。
D3 缺点是它有一个陡峭的学习曲线，文档已经过时并且导航混乱，上手要比其他框架困难。
D3 GitHub
D3 画廊
一组专门为React 和 React Native设计的模块化图表组件。
Victory很好地提供了创建图表的基础。轴自定义、标签、为单个图形传递不同的数据集之类的事情都非常简单，并且调整样式和行为非常简单直观。
它非常有效，可以让您用最少的代码构建一些漂亮的图表。绝对值得检查跨平台应用程序。
Victory GitHub
Victroy画廊
它是 Uber创建的一个简单的JavaScript 图形可视化库，它允许你创建所有常用类型的图表：条形图、树形图、线形图、面积图等。
它的API 非常简单，并提供了很大的灵活性。它很轻，动画简单但流畅。它还允许您根据现有元素编写自定义图表。
尽管关于React-Vis的内容并不多，但文档简单易读。
React-vis GitHub
React-vis 示例
它是React Native的数据透视表组件，对习惯了Excel分析风格的业务人员十分友好，并且能与React和其他框架很好地兼容，适合需要聚合、排序和过滤功能的数据报告。
它可以在Web 浏览器中免费使用，支持Microsoft Analysis Services OLAP多维数据集，Mondrian，icCube，Salesforce，SAP，SQL（MS SQL，MySQL和许多其他）静态数据库或者CSV文件。
可以在客户端浏览器处理多达100MB的数据文档以及庞大的OLAP多维数据集信息量，非常适合用于商业智能（BI）信息评估。
一个非常流行的开源库，在GitHub 上拥有超过4万颗星。它是轻量级的，可以使用HTML5 Canvas元素构建响应式图表。轻松混合和匹配折线图和条形图以组合不同的数据集，这是一个非常棒的功能。
Chart.js 默认提供六种不同的图表类型，它也是很多公司处理超大数据集的首选库。操作简单、对初学者友好。绝对是最有趣的开源库之一。
GitHub 上的
Chart.js Chart.js 示例
最热门的商业图表库之一。基于其精美的设计使，amCharts将Apple、Amazon、NASA和许多其他知名公司列为他们的客户，amCharts是一种商业工具，每个网站许可证的起价为180 美元。
作为回报，使用者可以获得所需的所有类型的图表，包括地理地图和出色的客服支持，响应时间平均不到3小时。
对于大公司来说，这是一个很好的解决方案。对于小公司或者个人用户，amCharts 也支持免费下载，唯一的限制是会在图表的左上角显示该网站的链接。
适用于：Angular、React、Vue.js、普通 JS 应用程序、TypeScript
amCharts GitHub
amCharts 网站
自称为“世界上最具交互性的JavaScript图表库”。除了反应性，它主要关注多点触控手势和各种设备的原生感觉。
即通过放大或者缩小来与图表进行物理交互，从而在不同数据粒度进行切换，支持数据图表的联动，对任何一个图表的过滤操作，会在其他图表中响应。
该库承诺提供漂亮的可视化效果，只需很少的代码，并且可以轻松部署在产品中。
ZoomChatrts在默认设置下，使用相同的数据和设置，运行速度比基于 SVG 的竞争对手快 20倍。
这是因为ZoomCharts从一开始就是为了处理和可视化大数据构建，支持在同一个图表混合多个数据源，通过数据存储和展示分开，轻松集成数据的下钻聚合操作。
Zoomcharts 网站
Zoomcharts 画廊
JavaScript图形世界中有很多机会，这些丰富的图形库可以协助大家完成复杂的数据分析工作，通过抽象的视图层解读数据，帮助企业挖掘数据价值。
越来越多的图形库证明了数据可视化对于整个Web的重要性——希望上面的介绍能帮助相关项目开发者创建漂亮的数据化解决方案。
私信我领取目标检测与R-CNN/数据分析的应用/电商数据分析/数据分析在医疗领域的应用/NLP学员项目展示/中文NLP的介绍与实际应用/NLP系列直播课/NLP前沿模型训练营等干货学习资源。
数据时代，收集和使用数据的需求正在爆发式增长，数据可视化也变得愈加重要。开发人员在想方设法将不同数据库中的记录整合到仪表板和漂亮的图表中，向人们快速直观地展示信息。
在过去十年中数据可视化技术不断改进，结果涌现了很多高水平的图表库。
21 世纪初期，人们使用服务端图像位图来生成图表。那时像 Silverlight 和 Flash 这样的插件提供了丰富的交互式图表体验，代价是减少电池寿命、拖慢下载速度并耗费更多系统资源。
移动设备兴起之后，移动平台不再支持插件并开始转向开放客户端技术，这些技术可以在任何平台上运行，成为了开发人员的首选。同时，触摸手势缩放和非常高分辨率的屏幕开始流行，使得无关分辨率的矢量图表广受欢迎。
随之而来的就是数据可视化的时代，SVG 可扩展矢量图像和 JavaScript 成为主角。今天的图表技术可支持所有浏览器平台，支持交互性和动画，并且不需要特殊的插件。这些图表在高分辨率设备中也有很好的显示效果。我们可以在 JS 开发中使用许多 JavaScript 图表库实现这些目标。
市面上有很多 JavaScript 图表库，本文则列出了其中的几款佼佼者，可以用在你的新项目中。
以下就是 2019 年的顶级 Javascript 图表库名单。
D3.js
D3.js（https://d3js.org/）是一个图形 JavaScript 库，功能众多，十分强大。你可以用它对文档做数据驱动的转换，然后将任意数据绑定到 DOM 上。
D3 是非常优秀的图表库。它有一些较小的技术模块，如颜色、轴、轮廓、层次结构、多边形、缓动等。这也意味着你需要学习很多知识才能用好它，上手并不容易。
即使用它创建简单的图表也可能需要复杂的步骤。你需要明确定义包含图表项和轴在内的所有元素。它提供了一些示例，教你如何使用 CSS 来设置图表元素的样式。开发者无法自动应用基于图表的功能。
如果你想从零开始设计复杂的图表，完全按照自己的想法控制所有元素，那么这个库就是你的首选。但如果时间紧迫，从头开始解决数据可视化项目需求可能就不是什么好主意了。
作为图表库来说，D3.js 可以充当构建块。开发者可以用 D3 与 NVD3 一类的方案配合工作。这个图表库完全免费并开源。
Highcharts
Highcharts（https://www.highcharts.com/）是市面流行的 JavaScript 图表库之一，并被许多大公司采用。为了提供对 IE6 到 IE8 的兼容性，它先使用 SVG 然后转向 VML 来生成图表。它的示例图表带有一些很棒的功能，但看起来不怎么吸引人。它的文档里有很多 API 文档教程和相关主题。
它的 API 易于使用，开发者可以使用配置选项来开发图表。对于个人和非商业用途，Highcharts 可免费使用；证券行业等用途需要商业许可，而甘特图和地图图表则需要单独的许可证。
Chart.js
Chart.js（https://www.chartjs.org/）是一个开源 JavaScript 库，支持 8 种类型的图表。它只有 60kb，是一个非常小的 JS 库。它支持的图表类型包括雷达、内联图表、饼图、条形图、散点图、面积图、气泡和混合等。它还支持时间序列。在呈现层面，它使用 canvas 元素并能响应窗口大小调整缩放比率。它对 IE9 向后兼容。要兼容 IE7 的话也可以使用 Polyfills。
初次使用它的示例时还能看到现代感的初始动画。实时添加数据点或序列时有平滑的动画效果。你可以调用 update() 函数来修改图表选项并重绘图表。
在它的网站中没有展示示例源代码，但可以在 GitHub 仓库中找到。它的 API 简洁直观。用户使用配置选项来创建和修改图表。它的文档内容翔实，附带代码片段和属性 API 的教程。
这个库可免费用于商业和个人用途。它是开源项目。但对于更高级别的需求来说，它提供的图表类型可能有点少。
amCharts
amCharts（https://www.amcharts.com/）已经推出了第 4 版，历史也挺长了。此版本支持 SVG 动画引擎，可帮助开发人员创建电影级场景。
它的示例图表非常漂亮，大多数示例都提供了滑块 UI，还附带许多调节器可以实时调整图表的变量。它的文档包括完整的 API 属性描述和许多教程。它提供了一个声明性 API 来创建图表，与基于配置的方法略有不同。它有很好的代码自动完成功能，但在配置图表时需要的代码略多。amCharts 的水印版图表是免费的，去掉水印需要付费。
谷歌图表
谷歌图表（https://developers.google.com/chart/）功能强大，易于使用。其示例图表简洁易读。可以在它的图表库和扩展库中找到许多图表类型。通过层叠菜单可以查看更多图表类型。
每种图表类型都有附带动态实例和很容易看懂的专门教程。这些教程附带 API 列表，并包含相关功能的代码。它为新人提供了非常愉快的入门体验。。
用户可以使用配置选项对象来自定义图表。DataTable 类用来填充数据集，也可以用在所有图表里。每种图表类型都带有以独特方式列出的选项和对应的教程。可选项很多，适用于不同类型，而属性命名是标准化的。
谷歌图表可以免费使用，但也有一些局限。它是一个 Web 服务，不能在本地托管。谷歌还退役了很多 API，所以它不适合用在关键项目中。
ZingChart
ZingChart（https://www.zingchart.com/）中有许多图表类型，能与 react、angular 等框架集成。它有一系列强大的功能和许多自定义选项。
它的示例图表有许多样式主题，其中一些看着很不错。还有许多选项可以用来添加样式。示例图表没有覆盖它支持的所有图表类型。
它的文档附带了许多功能教程，覆盖了所有类型的图表和全部 API。ZingChart 使用配置选项自定义图表。示例中有很多属性设置，如字体样式等。但这些带有属性设置的示例可能会让用户糊涂，不知道图表到底需要哪些设置。
ZingChart 的水印版可以免费使用。付费版没有水印。
FushionCharts
FusionCharts 最开始是基于 Flash 的图表插件，有着很长的历史。它是一个健壮的图表可视化库，提供对现代浏览器的支持，支持包括 JavaScript、JSON 和 XML 在内的许多数据格式，还兼容 IE6。它还支持许多服务端编程语言和 JavaScript 框架。
它的图表库附带了许多看上去简洁大方的示例。它的文档带有许多良好的 API 描述，而且每种图表类型都有示例。用户可以通过任务和图表功能分组配置属性。
用户使用基于配置的选项创建图表，用起来非常简单。深入研究 API 时会发现属性列表变得很长。showAlternateHGridColor、chartLeftMargin 等配置属性很好理解。它的代码自动完成功能还有改进的空间。
FusionCharts 的水印版可供个人免费使用。商业和非水印版本需要付费。
Flot
Flot（https://www.flotcharts.org/）用法简单、外观漂亮，交互功能丰富，是最优秀的纯 JavaScript 绘图库。它有效兼容所有新式浏览器，包括 Internet Explorer 6 +、Chrome、Firefox 2 +、Safari 3+ 和 Opera 9.5+ 等。它是最流行、历史最长的图表库。Flot 支持线、点、填充区域、条形以及它们的各种组合。
Flot 的工作机制是创建一个可以放入图表的占位符 div。
Sigmajs
这款产品可以用来创建一些漂亮的图形来在 Web 上显示网络，并在大型 Web 应用中展示简单的交互式网络；这种交互式网络具有动态探索功能。无论对初学者还是高级用户来说它都很好用。
它配备了一些令人兴奋的功能，如 Canvas 和 WebGL 渲染器，还有鼠标和触摸支持，帮助你制作更好的动态网络应用。
Sigmajs（http://sigmajs.org/）默认可配置，支持鼠标和触摸两种交互，并可以根据容器大小变化缩放显示。它还有自定义渲染，可以用一组工具和设置来定制网络的交互细节。
小结
JavaScript 图表库生态正在不断发展壮大。市面上能找到大量图表制作产品，可以满足多种多样的项目需求。大多数产品都提供了免费试用机会，方便用户评估。
英文原文：https://aglowiditsolutions.com/blog/top-javascript-chart-libraries/
*请认真填写需求信息，我们会在24小时内与您取得联系。
