告别繁琐的D3代码：这款可控、可自定义的D3图表库，更轻量、更简单！

大家注意：因为微信最近又改了推送机制，经常有小伙伴说错过了之前被删的文章，或者一些限时福利，错过了就是错过了。所以建议大家加个星标，就能第一时间收到推送。

大家好，我是「前端实验室」爱分享的了不起~

目前市面上绘制图表的 JavaScript 库已经多如繁星，而C3.js 就是其中的一员。

C3.js

C3.js 是基于 D3 visualization library 开发的 JavaScript 库，它可以让开发者构建出可复用的图表，并且还提供了一系列图表上的交互行为。

C3.js易于使用、可定制，并提供了一个很好的 API。它可用于使用 SVG、HTML 和 CSS 创建可视化效果。支持多种图表类型。

通过 C3，只需要往generate函数中传入数据对象就可以轻松地绘制出图表。

为什么使用C3.js

• C3.js 是一个简单的 D3.js 包装器，渲染速度更快，具有良好的跨浏览器兼容性，并且集成起来非常简单。
• C3.js易于使用。通过包装构建整个图表所需的代码，可以轻松呈现基于 D3 的图表。
• C3.js 很容易定制。
• C3.js 提供了多种回调来访问图表的状态。通过使用这些 API 和回调，您可以更新图表，即使在呈现图表之后也是如此。

使用C3.js

首选需要安装 c3。

npm i c3

此外，我们还需要 d3，因为 c3 依赖于它。

npm i d3

接着，更新 index.html 页面以获取所需的 JavaScript 和 CSS 引用。这是index.html的头部部分。它包含指向 bootstrap 和 jQuery 的样式表和 JavaScript 文件的链接

下图显示了页面的正文部分。我们有一个用于渲染的图表的 div。我们还有一些用于C3.js的脚本引用，也有一个用于我们的应用程序的脚本引用，即 app.js。

然后，可以使用 npm start 命令运行应用程序并打开 Web 浏览器并访问 http://localhost:3000：

C3.js使用示例

饼图

下面我们从最简单开始，创建一个饼图。在app.js中，更新代码，如下所示：

然后使用 c3 的 generate 函数。我们为它提供了一个 target-div（图表）。然后，数据对象包含有关调查结果的信息，我们定义图表“饼图”的类型。

生成折线图

折线图更方便时间线可视化：用于显示数据如何随时间变化。

下面是生成图表并将其绑定到 index.html 上的 div 的 JavaScript 代码（在 app.js 文件中）：

折线图的代码比饼图示例要复杂一些。我们仍然有 bindto 属性，而 data 属性现在包含更多的数据和类型。在此示例中，axis 属性允许我们自定义 y 轴。以下是此代码生成的图表的输出。

我们可以进一步自定义它，例如，通过更改 type 属性，如下所示：

现在可视化将如下所示（我们现在同时拥有条形和线类型）：

如果我们希望在调查结果数据的 x 轴上显示月份值而不是数字，可以通过稍微更改代码来实现这一点，如下所示：

请注意更新代码的标记行，以下是更改的输出。您可以看到，现在图表在 x 轴上显示月份名称而不是数字：

自定义折线图

自定义折线图的大小，需要我们使用 CSS 来进行。

将以下样式添加到site.css。在这里，我们以图表上的线型为目标，通过这种简单的样式，我们能够自定义线条的大小。

自定义轴，比如更改 x 轴和 y 轴的颜色

C3.js的自定义就要麻烦一些！需要熟练掌握相应的属性、样式等。

小结

本文是对C3.js图表库的基本介绍。虽然目前 C3 的文档比较少，也比较简单，但是 C3 提供了很多图表开发示例，从中我们可以了解到它的功能和强大之处。

感兴趣的小伙伴们，可以通过在官方网站上了解有关这些内容的更多信息。

C3.js官方地址 https://c3js.org/