原文 | https://blog.bitsrc.io/11-javascript-charts-and-data-visualization-libraries-for-2018-f01a283a5727
译文 | web前端开发
我们生活在这个数据信息爆炸的里时代,我们开发的每个应用程序都使用或利用了数据来改善我们的各种用户体验。
有时,我们可以给用户提供最佳的数据本身功能。表格和数字图表通常很容易阅读,但很难从大型数据表中获得可行的直接见解。
相反,我们可以使用整洁的数据可视化方法,这些方法可以利用大脑以视觉方式识别和处理数据的能力。为了帮助你入门并轻松将漂亮的数据可视化添加到你喜欢的应用程序中。
以下是我总结整理的一些最佳的Javascript数据可视化库(未排名)。你也可以随时发表评论并添加自己的建议和见解!
提示:使用Bit可以在应用之间快速重用UI组件。使用云库为你的团队提供支持,以加快您的应用开发速度。这些都是免费的。
1、D3js
D3.js获得了80K
stars
,可能是其中最受欢迎和最广泛的Javascript数据可视化库。D3用于处理基于数据的文档,并使用HTML,SVG和CSS使数据栩栩如生。D3对网络标准的重视使你无需结合专有框架即可将现代浏览器的功能与之结合,而是结合了可视化组件和数据驱动的DOM操作方法。它允许你将任意数据绑定到文档对象模型(DOM),然后将数据驱动的转换应用于文档。这是一个很棒的示例画廊。
2、ChartJS
一个非常流行的(
40k stars
)开源HTML 5图表库,用于使用canvas元素的响应式Web应用程序。V.2提供了混合的图表类型,新增了图表轴类型和动画。界面设计简单优雅,具有8种基本图表类型,你可以将库与moment.js组合为时间轴。你也可以在cdnjs上签出库。
3、ThreeJS
这个是非常受欢迎的库(45K stars;1K贡献者)内置用于使用WebGL创建3D动画。该项目灵活而抽象的性质意味着它对于可视化2维或3维数据也很有用。例如,你也可以使用指定的模块通过WebGL进行3D图形可视化。
4、Echarts & Highcharts
百度的Echarts项目(30K stars)是用于浏览器的交互式图表和可视化库。它是用纯JavaScript编写的,基于zrender canvas库。它支持Canvas,SVG(4.0+)和VML形式的渲染图。除了PC和移动浏览器之外,ECharts还可以与节点上的节点画布一起使用,以实现高效的服务器端渲染(SSR)。这是指向完整示例的场景链接,每个示例都可以在交互式场景上播放。
Highcharts JS是一个8Kstars,是基于SVG的广受欢迎的JavaScript图表库,具有旧浏览器的VML和canvas的后备功能。它声称eb被全球100家最大的公司中的72家使用,这使其(可能)成为世界上最受欢迎的JS图表API(Facebook,Twitter)。
5、 Metric-Graphics
MetricsGraphics.js(7k stars)是一个优化的库,用于可视化和布局时间序列数据。它相对较小(最小80kb),并且提供折线图,散点图,直方图,条形图和数据表的狭窄而优雅的选择,以及地毯图和基本线性回归等功能。这是一个交互式示例库的链接。
6、Recharts
8、C3js
C3是8k stars,是一个用于Web应用程序的基于D3的可重用图表库。该库为每个元素提供类,因此您可以通过该类定义自定义样式,并通过D3直接扩展结构。它还提供了各种API和回调来访问图表状态。通过使用它们,你甚至可以在绘制图表后对其进行更新。看一下这些例子:https://c3js.org/examples.html
9、 React Virtualized + React Vis + Victory
React-vis
(4k stars )是Uber的一组React组件,用于以一致的方式可视化数据,包括折线图/面积图/条形图,热图,散点图,轮廓图,六边形热图等。该库不需要具备D3或其他任何数据可见库的知识,并且提供了诸如X / Y轴之类的低级模块化构建块组件。与Bit一起工作的绝佳选择,并且是一个非常有用的库。
React virtualized
(12k stars )是一组React组件,用于有效地渲染大型列表和表格数据。每个发行版均提供ES6,CommonJS和UMD构建,并且该项目支持Webpack 4工作流程。请注意,必须将react,react-dom指定为对等依赖项,以避免版本冲突。赶紧去试试看。
Victory是由Formidable Labs构建的具有超过6k stars 的React可组合React组件的集合,用于构建交互式数据可视化。Victory对Web和React Native应用程序使用相同的API,以实现轻松的跨平台图表绘制。一种优雅而灵活的方法,可以利用React组件来支持实际数据可视化。我个人非常喜欢。
当使用单个组件时,这些库与Bit完美结合,可以在应用程序之间共享并同步它们。
10、 CartoDB
Carto是2k stars,是一种位置情报和数据可视化工具库,用于发现基础位置数据的信息。你可以使用Web表单上传地理空间数据(Shapefiles,GeoJSON等),并在数据集或地图中将其可视化,使用SQL进行搜索,以及使用CartoCSS应用地图样式。这里有很多视频演示(https://vimeo.com/channels/carto),可帮助您理解和入门。
11. Raw graphs