javascript 图表_9个Javascript库来构建交互式图表

因此，您手中有大量数据，其中包含许多变量，您必须以某种方式中继给其他人。 原始的，无组织的数据将使他们难以理解。 这就是为什么您需要图表帮助。 在网页设计中， 图表是用于数据可视化的最佳工具之一 。 它易于阅读，易于观看且相对容易设置。

但是，让我们提高一个层次：让我们为这些图表添加动画和交互性 ，以便读者不仅可以从图表中学到东西，还可以使用它。 实际上，这要比听起来容易得多，这要归功于许多JS库。 让我们检查一下。

1.

Chart.js是一个非依赖性库，用于构建6种不同类型的图表：折线图，条形图，雷达图，极地图，饼图和甜甜圈图。 该库还根据图表类型进行拆分，因此您的页面不会因不需要的内容而陷入困境。 它支持响应式设计，您可以轻松更改颜色或动画等变量以自定义图表界面。

2.

Chartist JS是一个很棒的库，可以构建使用SVG的响应式图表。 除了具有响应能力外，Chartist还通过清晰地将关注点分离为您提供了灵活性：CSS风格和JS控制风格。 为了简化自定义，包含了SASS文件。 很棒的是，您可以使用Chartist动画API SMIL来设置图表动画的无限选择，该API提供了更多的动画选项。

3.

C3 JS是一个基于D3 JS构建图表的库。 它包装了使用D3 JS构建图表所需的代码，因此您可以跳过编写D3代码的过程，而只需输入数据。 C3带有各种API，您可以使用它们轻松地控制图表。 要自定义图表，请为给定CSS类定义自己的自定义样式。 从简单的折线图到量规图构建图表。 查看此页面以查看库的工作方式。

4.

Flot是一个jQuery企鹅，用于创建具有交互元素的图表，例如打开或关闭一系列，数据点交互，平移，缩放等。 Flot带有各种图表类型选项，如果您想在图表上拥有更多功能，可以使用以下一些插件 。 该图表将与支持HTML画布的浏览器一起很好地工作。

5.

6.

Peity会在您的网页上添加一个迷你图表。 这是一个小型jQuery插件，可将元素转换为迷你svg线，条形图，甜甜圈图或饼图。 您只需要创建一个元素并提供一个1/5的值，然后对该元素进行调用peity('pie')调用，即可制作一个迷你饼图。 例如，要创建仅突出显示五分之一的甜甜圈图，以下是HTML：

<span class="donut">1/5</span>

您可以自定义图表的颜色，半径，宽度和高度，但是默认情况下，它以小尺寸显示。

7.

DC JS在使用的引擎方面与C3 JS有相似之处。 他们都使用D3库在SVG中渲染图表。 创建DC JS是为了帮助您可视化浏览器和移动设备的数据和分析。 由于它利用D3 JS，因此允许您向图表添加用户交互。 DC JS是一个功能强大的库，可以创建从简单到高度复杂的图表。

8. Google图表

您可以通过Google Chart使用Google Visualization API创建交互式图表和数据工具。 有一些图表库可以检查Google Chart的数据可视化功能。 首先，将简单JavaScript嵌入到您的网页中以加载所需的Google Chart库。 然后列出要绘制的数据，并通过图表选项进行一些自定义。 最后，创建一个具有ID的图表对象，然后在您的网页上创建一个具有该ID的<div>以显示您的图表。

9.

NVD3是使用D3 JS构建的一组可重复使用的图表和图表组件。 因此，该库是一个“模板”，可帮助您更轻松地构建图表。 在此处查看使用NVD3构建的许多示例图表 。

现在阅读：

翻译自: https://www.hongkiat.com/blog/js-library-interactive-charts/