前端绘制绘制图表

by Mandi Cai

蔡曼迪

绘制图表(第2页)：JavaScript图表库的比较 (Charting the waters (pt. 2): a comparison of JavaScript charting libraries)

深入研究D3.js，Dygraphs，Chart.js和Google Charts (A deep dive into D3.js, Dygraphs, Chart.js, and Google Charts)

The code for the charts I created in the header image is up on GitHub.

我在标题图像中创建的图表的代码位于GitHub上。

When I began creating charts and visualizing data, the only things I knew were “Consider Canvas for large datasets” and “D3 is magic”. I had no idea that there existed an entire ecosystem of charting libraries. These libraries are free, available, and complete with examples and documentation.

当我开始创建图表并可视化数据时，我唯一了解的就是“考虑大型数据集的画布 ”和“ D3是魔术”。我不知道有一个完整的图表库生态系统。这些库是免费的，可用的，并带有示例和文档。

More importantly, each library has its own pros and cons with regards to the variety of charts, learning curve, level of customization, and out-of-the-box interactivity. So how does one decide?

更重要的是，在各种图表，学习曲线，自定义级别和开箱即用的交互性方面，每个库都有自己的优缺点。那么如何决定呢？

I’ll compare a few popular JavaScript charting libraries in this article, specifically D3.js, Dygraphs, Chart.js, and Google Charts. Expect to learn how to create a JavaScript chart, a high-level comparison across libraries of the aforementioned factors (variety of charts, customization, etc.), and the use case I perceive to be best suited to each charting library.

我将在本文中比较一些流行JavaScript图表库，特别是D3.js ， Dygraphs ， Chart.js和Google Charts 。期望学习如何创建JavaScript图表，对上述因素(各种图表，自定义等)的库进行高层比较，以及我认为最适合每个图表库的用例。

But first, a quick introduction to why visualizing data is becoming increasingly important. You’re welcome to skip to the side-by-side comparison (Ctrl+F “Let’s compare!”).

但是首先，快速介绍为什么可视化数据变得越来越重要。欢迎您跳到并排比较( Ctrl+F “让我们比较！”)。

为什么要绘制图表并可视化数据？ (Why chart and visualize data?)

I’ve always thought of data visualizations as a better way to learn and engage an audience. Not everyone is a natural at absorbing information through text. My eyes glaze over when trying to extract numbers from a block of words. Text also assumes you’re familiar with the language it’s written in. I struggled with textbook readings in college. It’s plausible that non-native English speakers were having a hard time as well.

我一直认为数据可视化是学习和吸引观众的更好方法。并非每个人都天生喜欢通过文本来吸收信息。尝试从一个单词块中提取数字时，我的眼睛呆呆的。课文还假设您熟悉所写的语言。我在大学期间难以接受课本的阅读。讲非英语的人也很难过。

Alternatively, whenever I came across a beautiful, clarifying diagram amidst the piles of information, I immediately grasped the concepts and remembered them better too.

另外，每当我在大量信息中遇到美丽，清晰的图表时，我立即掌握了这些概念，并更好地记住了它们。

Our minds are not wired to quickly and thoroughly understand large chunks of text or piles of Excel rows. But what they do excel at is recognizing similarity, symmetry, connections between objects, and continuity, which are foundations of data visualization. Think Gestalt Principles.

我们的思想并不能快速而透彻地理解大块文本或成堆的Excel行。但是他们擅长的是识别相似性，对称性，对象之间的联系以及连续性，这是数据可视化的基础。想想格式塔原理。

Here’s a snippet of some data from the Bureau of Labor Statistics about the unemployment rates across U.S. counties (represented by a FIPS code) in 2016.

以下是美国劳工统计局(Bureau of Labor Statistics)有关美国各州2016年失业率的一些数据片段(以FIPS代码表示)。

To spot trends or catch outliers, the average person would spend a significant amount of time staring at this data. They may scan each row and re-write figures on another sheet of paper. Not ideal.

为了发现趋势或发现异常值，普通人将花费大量时间盯着该数据。他们可能会扫描每一行并在另一张纸上重写图形。不理想。

But if we visualize the data as a geographic map, as Mike Bostock did in his Observable notebook:

但是，如果我们将数据可视化为地理地图，就像Mike Bostock在他的Observable笔记本中所做的那样：

You can immediately see hotspots for higher unemployment. Instead of hours, you’ve now detected interesting patterns in seconds. That difference in time to understand can mean the difference between ditching a seemingly “incomprehensible” dataset, or alternatively, furthering your investigation. Creating accurate and accessible visualizations also allows viewers to catch inconsistencies or holes in the dataset, which holds the data more accountable.

您会立即看到失业率上升的热点。您现在只需几秒钟即可检测到有趣的模式，而不是数小时。理解时间的差异可能意味着放弃看似“难以理解”的数据集之间的差异，或者意味着进一步进行调查 。创建准确且可访问的可视化视图还可以使查看者捕捉数据集中的不一致之处或漏洞，从而使数据更具责任感 。

图表的剖析 (The anatomy of a chart)

Before jumping into the library comparison, I think the basic “anatomy” of a JavaScript chart warrants an overview. While working through these libraries, I noticed that all except for D3* adopted the same pattern for generating charts.

在进入库比较之前，我认为需要对JavaScript图表的基本“解剖结构”进行概述。在浏览这些库时，我注意到除D3 *以外的所有库均采用相同的模式来生成图表。

Import the charting library into the HTML.
将图表库导入HTML。
Create a <div> with an ID identifier, such as “my-first-chart”.
创建具有ID标识符的<d iv>，例如“ my-first-chart”。
Fetch and load data in the JS. You may also define the data directly in the JS. Make sure you’ve linked this JS file in the HTML.
在JS中获取并加载数据。您也可以直接在JS中定义数据。确保已在HTML中链接了此JS文件。
Pass the data, the <div> container, and an options object to a chart generator function.
将数据， <d iv>容器和选项对象传递到图表生成器函数。
Some libraries, like Google Charts, require calling draw() to draw the generated chart.
某些库(例如Google Charts)需要调用draw()来绘制生成的图表。
Serve the code up on a Python server with http-server -c-1 -p 8000 and see your first chart at localhost:8000.
使用http-server -c-1 -p 8000在Python服务器上提供代码，并在localhost:8000查看您的第一个图表。

Examples

例子

Basic Dygraphs example
基本音标示例
Basic D3.js example
D3.js基本示例
Basic Chart.js example
Chart.js基本示例
Basic Google Charts example
基本Google图表示例

*D3 has been primarily used for charting, but it’s more of a collection of toolkits than your standard charting library. See this article for a better explanation.

* D3主要用于制图，但它比标准制图库更多的是工具箱的集合。请参阅本文以获得更好的解释。

让我们比较一下！ (Let’s compare!)

When picking any library, I like to start with these evaluation questions:

在选择任何库时，我喜欢从以下评估问题开始：

What’s the learning curve? (quality of documentation, code complexity)
什么是学习曲线？ (文档质量，代码复杂度)
How much can I customize my charts?
我可以自定义多少图表？
Is the library actively supported?
是否积极支持图书馆？
What types of data does this library take?
该库需要什么类型的数据？
What modes of interactivity are offered?
提供哪些交互方式？
Does the library offer responsive charts?
图书馆是否提供响应式图表？

学习曲线 (Learning curve)

Dygraphs, Chart.js, and Google Charts have relatively small learning curves. They are great if you need to whip up charts in a couple of hours.

dygraph，Chart.js和Google Charts的学习曲线相对较小。如果您需要在几个小时内绘制图表，它们就很棒。

D3 has the highest learning curve, and the reason for this is the fine-grain, low-level control it offers. It’s more of a well-written library of advanced helper functions. D3 can theoretically be used in conjunction with other charting libraries.

D3具有最高的学习曲线，其原因是它提供了细粒度的低级控制。它更多是一个精巧的高级帮助程序函数库。 D3理论上可以与其他图表库结合使用。

To explore a bit further, I created the same chart across all 4 libraries using Boston weather data from meteoblue. The code is up on GitHub.

为了进一步探讨，我使用来自meteoblue的波士顿天气数据在所有4个库中创建了相同的图表。代码在GitHub上。

…. and recorded the lines of code needed to make each chart:

…。并记录了制作每个图表所需的代码行：

The lines of code support the original comparison of learning curves. D3 needs significantly more lines to get a basic chart up and running but provides more opportunity for customization.

代码行支持学习曲线的原始比较。 D3需要更多的线才能启动并运行基本图表，但提供了更多的自定义机会。

客制化 (Customization)

D3 shines in the customization arena. D3’s granularity and modularity is exactly why designers and developers favor it as the medium for stunning and unique visualizations. Chart.js and Google Charts offer numerous options that can be passed into a generator function, such as legend font size and thickness of a line.

D3在定制领域大放异彩。 D3的粒度和模块化正是设计人员和开发人员偏爱D3作为令人惊叹和独特的可视化的媒介的原因。 Chart.js和Google Charts提供了许多可以传递到生成器函数中的选项，例如图例字体大小和线条粗细。

积极发展 (Active development)

I define library development as the frequency of releases and the responsiveness of library maintainers to opened issues and feedback for improvement. A supportive and large community of users is also a plus. Usage encourages healthy change and accountability as the JavaScript ecosystem evolves.

我将库开发定义为发布的频率以及库维护者对未解决问题和改进反馈的响应能力。一个支持用户的大型社区也是一个加号。随着JavaScript生态系统的发展，使用鼓励健康的变化和责任感。

Looking at the respective GitHub repositories, I discovered releases and resolved issues for Dygraphs and Google Charts to be more sporadic than D3 and Chart.js. D3 will not reach a halt in development any time soon. Its creator and contributors recently released a major version (v5.0) in 2018. They still actively contribute to the visualization community. Chart.js’s latest release also occurred pretty recently in 2018. The release addressed issues and enhancements. They are documented thoroughly in the release notes.

通过查看各自的GitHub存储库，我发现Dygraphs和Google Charts的发行版和已解决的问题比D3和Chart.js更为零星。 D3不会在任何时候停止发展。它的创建者和贡献者最近在2018年发布了主要版本(v5.0)。他们仍在为可视化社区做出积极贡献。 Chart.js的最新版本也发生在2018年。该版本解决了问题和增强功能。它们在发行说明中有完整记录。

资料类型 (Types of data)

This speaks for itself. Fun fact: I used D3’s fetch library to fetch data. I used other libraries to chart it. D3 has fetch functions for almost all common data formats used in data visualization.

这是不言而喻的。有趣的事实：我使用D3的获取库来获取数据。我使用其他库来绘制图表。 D3具有获取功能，可用于数据可视化中几乎所有常见的数据格式。

互动性 (Interactivity)

Dygraphs, Chart.js, and Google Charts all have some out-of-box interactivity features, like tool tips, zoom, and events. It’s difficult to introduce highly custom interactions because each library is so encapsulated. With D3, you accept that complicated and unique interactions are possible. The tradeoff is simple interactions, like a tool tip, must also be constructed from the ground up.

Dygraphs，Chart.js和Google Charts都具有一些现成的交互功能，例如工具提示，缩放和事件。由于每个库都是如此封装的，因此很难引入高度自定义的交互。使用D3，您可以接受复杂而独特的交互。折衷是简单的交互，例如工具提示，也必须从头开始构建。

React性 (Responsiveness)

Chart.js and D3 offer responsive charts out of the box (for D3, specify a viewBox instead of width and height for the svg container). Dygraphs and Google Charts need some additional work to create responsive charts, like adding position: relative to the chart container or redrawing the chart on $(window).resize().

Chart.js和D3提供了开箱即用的响应式图表(对于D3，请指定viewBox而不是svg容器的width和height )。 Dygraphs和Google Charts需要做一些额外的工作来创建响应式图表，例如添加position: relative对于图表容器或在$(window).resize()上重绘图表。

Dygraphs responsive chart (inspect the chart containers to see the CSS classes)

字体图响应图表(检查图表容器以查看CSS类)

Responsive Google Charts Stack Overflow thread

响应式Google Charts Stack溢出线程

最适合？ (Best used for?)

Last but not least, I’ve listed the use case that I think each library is best suited for:

最后但并非最不重要的一点是，我列出了我认为每个库最适合的用例：

D3 is worth investing time in if you a) need a highly custom visualization and/or b) want helper functions to use in conjunction with other libraries.

如果您a)需要高度自定义的可视化效果和/或b)希望将辅助函数与其他库一起使用，则D3值得投入时间。

I enjoyed Dygraphs for time series because the user can pan over the series and see the date and corresponding point by default. You can also highlight specific periods of time and select ranges of time.

我喜欢时间序列的Dygraphs，因为用户可以平移序列并默认查看日期和对应点 。您还可以突出显示特定时间段并选择时间范围。

Chart.js allows you to create simple, aesthetically pleasing charts that pop into the page seamlessly on load.

Chart.js允许您创建简单，美观的图表，这些图表在加载时无缝弹出到页面中。

Finally, Google Charts offered the most variety of out-of-the-box charts, compared to the other libraries. In addition to standard charts, Google Charts also supports geographic maps, tree maps, sankey diagrams, etc.

最后，与其他库相比，Google Charts提供了最多样的现成图表 。除标准图表外，Google图表还支持地理地图，树形地图， sankey图等。

3、2、1…回顾！ (3, 2, 1 … recap!)

We’ve covered the many reasons why data visualization is powerful, the basic structure and steps to create a chart using a charting library, and a play-by-play comparison of 4 popular JavaScript libraries.

我们已经介绍了数据可视化功能强大的许多原因，使用图表库创建图表的基本结构和步骤 ，以及对4种流行JavaScript库的逐项比较。

The most important step after you’ve selected a library and generated some visualizations is to communicate, and then iterate. Show your charts to others and ask them what they can and cannot interpret. Listen to their feedback and keep tweaking your charts. They’re teaching tools, and teaching tools should constantly evolve with the content and the viewers.

选择一个库并生成一些可视化文件后，最重要的步骤是进行交流，然后进行迭代 。向其他人显示您的图表，并询问他们可以和不能解释的内容。听取他们的反馈，并不断调整图表。它们是教学工具，教学工具应该随着内容和观看者的发展而不断发展。

Thank you for reading!

感谢您的阅读！

- — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

-— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Code for the charts I created are up on GitHub.

我创建的图表的代码位于GitHub上。

Here are the presentation slides that led to this article.

这是导致本文的演示幻灯片。

If you want to read about Bokeh and D3, check out Charting the waters: between Bokeh and D3.

如果您想了解Bokeh和D3，请查看在Bokeh和D3之间绘制水域图表。

If you have any suggestions or feedback, drop a comment.