整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

10个用于创建漂亮图表的Javascript库

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。

天我们带来一篇来自Adobe工程师Rohit Boggarapu的文章。他在文章中介绍了一些适合网页开发者的数据可视化和绘图工具,让你不必再花大力气与枯燥的数据抗争。部分工具不要求写代码也可以使用!

我们诠释数据的方式和数据本身之间存在着巨大的鸿沟。尤其是当我们唯一的选择是盯着表格中一列列不知所云的数字时。这可能是最无聊的一种格式了。

没有哪个网页开发者会喜欢电子表格。好消息是,现在我们有了许多更加优雅的方式来呈现数据,再也没有必要使用静态的Excel 图表了。

在为你的项目选择合适的绘图工具时,要考虑到许多事情。本文将为你分析适合网页开发者的 12 个最好的工具,让你不再花费大把时间跟数据做斗争,而是开始轻松地绘制漂亮的图表。虽然本文推荐的工具是面向网页开发者的,但其中一些并不需要会写代码就能使用。许多工具都有着丰富的交互式例子,即使是新手也能轻松地通过改动代码来创建自定义图表。

01 Google Charts

文档和帮助信息丰富的 Google Charts 对于刚刚入门 JavaScript 绘图的人来说是极佳的选择。它的文档里到处都是带注释的代码和逐步的讲解,可以直接用来把 HTML5 / SVG 图标嵌入到你的网页中。

如果你需要更进阶的自定义功能或是 Google 原始提供的 18 类以外的图表,下面会介绍一些有着更多类别和特性的选择。

适合人群:追求灵活性和良好文档的严肃开发者。

02 MetricsGraphics

MetricsGraphics 是一个在 D3.js 的基础上专为可视化时间序列数据而开发的绘图库。虽然它只支持线图、散点图、柱状图、直方图和数据表格,但它在这几类图表上的表现非常强。

跟 Google Charts 一样(MetricsGraphics 是 Mozilla 的产品),丰富的文档和例子使得它很容易上手。比如这个非常有趣的关于 UFO 目击事件的交互式例子。

同时它也是一个非常简易和轻量级的选择。

适合人群:追求快速美观同时又不需要写一堆杂乱代码的开发者。

03 FusionCharts

FusionCharts 支持 vanilla JavaScript、jQuery、Angular 等一系列高人气的库和框架。它内置90多种图表和超过1000种地图,相比 Google Charts 和 MetricsGraphics 要完整得多。你可以在这里查看它所支持的全部图表类型。

考虑到应用或是网站的拓展性,如果你选择了一个功能不完整的绘图库,这就有可能在将来发展成一个问题。而像Microsoft、Google 和 IBM 这样的公司都在使用 FusionCharts,这说明它是一个能满足企业级拓展性需求的工具。

适合人群:需要各种不同种类的易自定义图表的开发者。

04 Epoch

Epoch 是一个基于 d3.js 开发的工具,它使得开发者可以方便地在他们的应用或是网站上部署实时图表。它的文档整洁,完全免费并且开源,这使得它对于不想花钱购买重量级解决方案的人来说是一个很好的选择。

对普通数据和实时数据,Epoch 都支持 5 种图表类型。这个数量并不能与 FusionCharts 或是 Highcharts 这种特性完整的产品对抗,但它所专长的是以简单和友好的方式呈现实时数据。

适合人群:需要简单灵活的实时数据呈现方案的开发者。

05 ECharts

百度的 ECharts 是一个很棒的工具,它支持在绘制完数据后再对其进行操作。这个被称为 Drag-Recalculate 的特性使得用户可以在图表之间拖动一部分的数据并得到实时的反馈。同时,ECharts 是专为绘制大量数据设计的。它可以瞬间在二维平面上绘制出 20 万个点,并用专为 ECharts 开发的轻量级 Canvas 库 ZRender 使数据动起来。

你可以在这里对上图进行操作,来体验 ECharts 所提供的特性。

适合人群:想尽量避免写代码并有实时数据操作需求的开发者。

06 D3.js

虽然并不是对用户最友好的工具,但 d3.js 在 JavaScript 绘图界的重要性是不可小觑的。许多其他的库都是基于它所开发,因为它提供了你所能想到的所有功能。它支持 HTML、SVG 和 CSS,并且有着海量的用户贡献内容来弥补它缺乏自定义内容的劣势。

适合人群:不怕写代码的硬核绘图专家。

07 Sigma

跟上面已经提到过的工具相比,Sigma 有着自己独特的定位,那就是图模型的绘制。它基于 Canvas 和 WebGL 开发并提供了公开的 API。所以你可以在 GitHub 上找到社区贡献的许多插件。举例来说,你可以用 Sigma.js 画出这样的图:

Sigma 同时也是响应式的,并支持触屏。开发者很容易添加新的功能以及精细地控制边和顶点的规格。

适合人群:需要专为绘制图模型设计的强大工具的开发者。

08 Highcharts

人气极高的 Highcharts 可以在不依赖插件的情况下绘制交互式的图表。它高灵活性的绘图 API 也被 Nokia、Twitter、Visa 和 Facebook 这样的公司所青睐。

Highcharts 对于非商业使用是免费的,而商业许可的价格是一份590美元(附带技术支持)。

这是一个用它绘制的例子:

适合人群:需要在技术支持的帮助下绘制各种复杂的图表的开发者。

09 dc.js

dc.js 是一个开源的 JavaScript 绘图库。它非常适合用来创建交互式的仪表盘(Dashboard)。图表之间是有联系的,所以当你与其中一个部分进行交互时,其他部分都会做出实时的反馈。这是一个例子:

除了一些在线课程以外,你可以通过各种例子来学习使用这个库。等你照着文档动手一遍以后就有能力创建自己的图表了。

虽然 dc.js 并没有像 ECharts 或是 Google Charts 那样丰富的功能,但它在自己的卖点——易于呈现和探索巨量的维度数据集上做的非常好。

适合人群:需要为关系型图表创建一个仪表盘的开发者。

10 dygraphs

由 Google 开发的 dygraphs 绝对是绘图工具中的明星。到现在 Google Correlate 还在使用它(当然,在设计上经过了一些调整)。它可以被用于绘图密集的项目,因为它能在不影响性能的情况下轻松地绘制几百万个数据点,这在很大程度上弥补了它那过于朴素的审美设计。

从一开始作为 Google 的一个内部项目到最后公开发布,dygraphs 一直有着活跃的社区支持。同时它也在 GitHub 上开源。

适合人群:需要有着活跃支持的专为绘制海量数据集设计的工具的开发者。

11 Vega

Vega 是一个基于 d3.js 的用于创建、分享和保存可视化图标的库。它由许多部件组成,其中一些能够在不需要写代码的前提下达到与 d3 竞争的水平。Vega 能够把 JSON 数据转换成 SVG 或 HTML5 图表。虽然这没什么了不起的,但它把这一步做的很踏实。

因为使用 Vega 不需要写任何代码(只要会编辑 JSON 文件即可),它是一个很好的 d3 替代品,能在降低使用复杂度的同时保留 d3 的特性。

适合人群:需要 d3 强大的特性又不希望从头学起的开发者。

12 NVD3

最后介绍的工具也是基于 d3.js 的。作为绘图界的佼佼者,NVD3 是由一系列部件组成的,允许开发者创建可重用的图标。你可以在它的网站上找到许多 demo 和对应的代码。这也是上手 NVD3 的最佳方式。

你可以看到,NVD3 的审美风格要比 d3.js 更为精致一点。

它支持 11 种图表类型,包括区域图、线图、柱状图、气泡图、饼状图和散点图。同时也支持所有现代浏览器以及 IE 10 以后的版本。

适合人群:熟悉 d3 并想要可重用图表的开发者。

来源于网络

推荐阅读

Python数据可视化

作者:(印)科斯·拉曼(Kirthi Raman)

本书介绍了利用Python实现数据可视化。并介绍了数据、信息与知识之间的关系。书中涉及的可视化过程应用了大量流行的Python库,你会学到采用Numpy、Scipy、IPython、MatPotLib、Pandas、Patsy和Scikit-Learn等生成可视化结果的不同方法。

全国喝酒图鉴

什么是横断山?

褚时健:活着是为了什么?

大江大河40年:改变命运的七次机遇

中国422位皇帝被拉到一个微信群里,他们在聊些什么呢?

 1:D3

  一个基于数据操作文档的js数据可视化框架,最流行的可视化库之一。

  2:Chart.js

  基于 HTML5 的 JavaScript 图表库

  


  3:ECharts

  ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。是百度的一个开源的数据可视化工具。

  


  4:Leaflet

  Leaflet 是一个为移动设备设计的交互式地图的开源的 javascript库, 并只有38k,包含了大多数开发者需要的地图特点。常常被用于需要展示地理位置的项目。

  5:highcharts

  star:9.5K

  基于SVG的JavaScript 图表框架,兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库。一般的问题好解决,但是一旦遇到了关键问题,个人支持非常有限, 支持图形相对于fusioncharts来说,比较少