大家注意:因为微信最近又改了推送机制,经常有小伙伴说错过了之前被删的文章,或者一些限时福利,错过了就是错过了。所以建议大家加个星标,就能第一时间收到推送。
大家好,我是「前端实验室」
爱分享的了不起~
目前市面上绘制图表的 JavaScript 库已经多如繁星,而C3.js 就是其中的一员。
C3.js 是基于 D3 visualization library 开发的 JavaScript 库,它可以让开发者构建出可复用的图表,并且还提供了一系列图表上的交互行为。
C3.js易于使用、可定制,并提供了一个很好的 API。它可用于使用 SVG、HTML 和 CSS 创建可视化效果。支持多种图表类型。
通过 C3,只需要往generate函数中传入数据对象就可以轻松地绘制出图表。
首选需要安装 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:
下面我们从最简单开始,创建一个饼图。在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/