If you’re building a web app using JavaScript, it is inevitable that at some point you’ll need to display some data. Preferably in an easy-to-digest manner, which usually means generating some type of chart or graph. Visualizing data is an important element of your application, and it should enhance the look and feel of the app not drag it down with bland, dull style.

如果要使用JavaScript构建Web应用程序，则不可避免地需要在某些时候显示一些数据。 最好以易于消化的方式进行，这通常意味着生成某种类型的图表。 可视化数据是应用程序的重要组成部分，它应增强应用程序的外观和风格，而不应以平淡，呆板的样式将其拖拽下来。

Building charts and graphs by hand is time consuming and just plain silly with the amount of freely available libraries out there today. But finding the right library can be tough. There are so many options that it can overwhelming. Striking a good balance between features, the look and feel of the elements and the complexity of configuration is tricky.

手工构建图表非常耗时，而且如今免费的可用库数量简直是愚蠢的。 但是，找到合适的库可能很困难。 有太多的选择可能使您不知所措。 在功能，元素的外观和配置以及复杂性之间取得良好的平衡非常棘手。

I’ve put together a list of some superb, free and easy-to-use chart libraries that exemplify the perfect balance of these elements without being too clunky or complex. I’ll also provide some links and additional information to use each library with a few popular frameworks like React, Vue or Ember.

我整理了一些精湛，免费且易于使用的图表库的列表，这些图表库例证了这些元素的完美平衡，而又不过于笨拙或复杂。 我还将提供一些链接和其他信息，以将每个库与一些流行的框架(如React，Vue或Ember)一起使用。

Chart.js (Chart.js)

Modern, sleek, popular and a breeze to implement. Chart.js is a fantastic library for any project because of its simplicity and elegance. The elements are responsive and look great. Chart.js uses HTML5 elements which means the animations and renders are buttery smooth and efficient across a wide range of browsers.

现代，时尚，流行且轻而易举。 Chart.js简洁而优雅，是任何项目的理想库。 元素React灵敏，看起来很棒。 Chart.js使用HTML5元素，这意味着动画和渲染在各种浏览器中都非常流畅且高效。

This library is a great addition to any project to display even the most complex of datasets. With Chart.js you get a lot of built-in functionality and interactivity for free. Things like toggling to enable or disable different datasets are presented by default and make producing useful, dynamic visuals a breeze. For more detailed information on setting up Chart.js checkout the official documentation. There is also a great beginners guide that takes you through each step element-by-element from Stanley Ulili available here.

该库是对任何项目的重要补充，甚至可以显示最复杂的数据集。 通过Chart.js，您可以免费获得许多内置功能和交互性。 默认情况下会显示诸如切换以启用或禁用不同数据集之类的操作，使生成有用的动态视觉效果变得轻而易举。 有关设置Chart.js的更多详细信息，请查看官方文档 。 还有一个很大的新手引导，带您完成每个步骤元素的元素从士丹利Ulili可用这里 。

Chart.js Plugins:

Chart.js插件：

• react-chartjs-2 (React)

  react-chartjs-2 (React)

• vue-chartjs (Vue)

  vue-chartjs (Vue)

• ember-cli-chart (Ember)

  烬图 (灰烬)

C3.js (C3.js)

C3.js is built using D3.js which is the underlying framework for many data other visualization libraries and even some cloud notebook interfaces like Observable. D3.js has a lot features and you may not need all of them if you simply want a few flexible graphs to display simple data. Don’t worry, C3 has you covered.

C3.js使用D3.js构建，D3.js是许多数据，其他可视化库甚至某些云笔记本界面(如Observable )的基础框架。 D3.js具有很多功能，如果您只希望一些灵活的图形来显示简单数据，则可能不需要所有这些功能。 不用担心，C3已覆盖您。

Although the C3 elements might not feel as visually slick as Chart.js or other libraries they are incredibly functional and provide a lot of flexibility. Like the other libraries, C3 is pretty straightforward and simple to use. Implementing a simple bar chart is incredibly easy, here’s one of the examples from their site:

尽管C3元素在视觉上可能不如Chart.js或其他库那么光滑，但它们的功能令人难以置信，并提供了很大的灵活性。 像其他库一样，C3非常简单易用。 实施简单的条形图非常容易，这是其站点中的示例之一：

// adapted from https://c3js.org/samples/chart_bar.htmllet chart = c3.generate({    data: {        columns: [            ['data-1', 10, 20, 30, 40, 50, 60],            ['data-2', 70, 80, 90, 100, 90, 80]        ],        type: 'bar'    },    bar: {        width: {            ratio: 0.75        }    }});

Check out C3.js examples for more awesome visual data types.

查看C3.js 示例，以获取更多很棒的可视数据类型。

C3.js Plugins:

C3.js插件：

• react-c3js (React)

  react-c3js (React)

• vue-c3 (Vue)

  vue-c3 (Vue)

• ember-c3 (Ember)

  ember-c3 (灰烬)

密谋 (Plotly)

Plotly is a data visualization powerhouse. Where other libraries might lack certain esoteric visualization types Plotly probably has them. There are a ton of different types to choose from. The Plotly JavaScript charting library is also built on D3.js but they offer the same charting power for Python and R languages as well.

Plotly是数据可视化的强大力量。 其他库可能缺少某些深奥的可视化类型的地方Plotly可能拥有它们。 有很多不同的类型可供选择。 Plotly JavaScript图表库也基于D3.js构建，但是它们也为Python和R语言提供相同的图表功能。

Not only does Plotly have a multitude of chart types, it also has fantastic documentation. There are exceptionally detailed guides on configuring each chart type and interactive examples for deciding which type is right for your project. The only downside of Plotly’s incredible offering is that some of the elements can be pretty complex to setup. Depending on the chart type you select you might be looking at a steep configuration curve.

Plotly不仅具有多种图表类型，而且还具有出色的文档。 有关配置每种图表类型的详细指导以及用于确定哪种类型适合您的项目的交互式示例。 Plotly令人难以置信的产品的唯一缺点是某些元素的设置可能非常复杂。 根据您选择的图表类型，您可能会看到陡峭的配置曲线。

Plotly Plugins:

剧情插件：

• react-plotly (React) (GitHub available here)

  react-plotly (React)(可以在 GitHub上找到)

• vue-plotly (Vue)

  vue-plotly (Vue)

• ember-cli-plotly (Ember)

  灰烬阴谋 (灰烬)

Chartist.js (Chartist.js)

Chartist figures look a little different at first glance. They don’t have the same sharpness and rigidity as other libraries. Chartist has a soft, smoothed over feel and the animations look incredible. This is because Chartist uses SVG graphics with CSS animations. If you’ve ever experienced a CSS animation heavy application (animista.net for example) before and felt connected with the smoothness and fluidity of the style then Chartist is a great option. The Chartist style can be especially useful if you’ll be visualizing data in an already animation-heavy site or if your theme follows the same underlying style.

宪章主义者的形象乍一看有些不同。 它们没有其他库一样的清晰度和刚性。 Chartist具有柔和，平滑的感觉，并且动画看起来令人难以置信。 这是因为Chartist将SVG图形与CSS动画一起使用。 如果您以前曾体验过CSS动画繁重的应用程序(例如animista.net )，并且感觉与样式的流畅性和流畅性相关，那么Chartist是一个不错的选择。 如果您要在已经有大量动画的网站中可视化数据，或者您的主题遵循相同的基础样式，则Chartist样式可能特别有用。

“Only 10KB (Gzip) with no dependencies!”

“只有10KB(Gzip)，没有依赖性！”

Chartist also prides itself on having a super small footprint. Even though those dazzling animations might seem like they come with a high cost, Chartist claims:

Chartist还以超小的占地面积为荣。 尽管这些令人眼花animation乱的动画看起来似乎成本很高，但Chartist声称：

“Only 10KB (Gzip) with no dependencies!” — Chartist.js

“只有10KB(Gzip)，没有依赖性！” — Chartist.js

So if your project is highly size constrained or you don’t love adding bloated libraries (who does anyway) that slow things down check it out.

因此，如果您的项目受到高度的限制，或者您不喜欢添加肿的库(无论如何，它们都会这样做)，这会使检查速度变慢。

Chartist Plugins:

Chartist插件：

• react-chartist (React)

  React图 (React)

• vue-chartist (Vue)

  Vue -chartist (Vue)

• ember-cli-chartist (Ember)

  灰烬图表专家 (灰烬)

• More available on Chartist site

  可以在Chartist网站上获得更多信息

Thank you for reading. I hope you’ve enjoyed discovering the elegance and great features of these data visualization libraries. Although many of them appear to be implemented similarly at first, under the surface each has a slightly different goal and nuance, especially when it comes to user interface. Try enhancing your own projects with one of these libraries for a more visually rich and appealing data experience.

感谢您的阅读。 我希望您喜欢发现这些数据可视化库的优雅和强大功能。 尽管它们中的许多乍看起来似乎是类似地实现的，但在表面上，每个对象的目标和细微差别都稍有不同，尤其是在涉及用户界面时。 尝试使用这些库之一增强您自己的项目，以获得更丰富的视觉效果和更吸引人的数据体验。