前端繪制繪制圖表

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.