在前端开发中，经常需要使用图表来展示数据。c3 是一个基于 D3.js 的图表库，并且在使用过程中比 D3.js 更加方便。但是使用 c3 时需要手动调用 c3 API 来创建图表，这可能比较麻烦。为了解决这个问题，可以使用 c3-cli，这是一个能够帮助开发者快速创建 c3 图表的命令行工具。
安装 c3-cli
在使用 c3-cli 之前，需要先将其安装在自己的计算机上。可通过在终端中输入以下命令进行安装：
$ npm install -g c3-cli
使用 c3-cli
初始化项目
在终端中输入以下命令，将项目初始化为一个 c3 项目。
$ c3 init <project-name>
运行该命令后，将会看到一个包含基本文件结构的 c3 项目创建成功。
创建图表
进入创建好的项目中，使用以下命令创建一个 line 类型的图表。
$ c3 generate line
运行该命令后，将会看到一个包含相关配置的文件 line-chart.js 被创建在 src 目录中。这个文件包含了 c3 创建线性图表所需要的所有配置。
配置图表
在 line-chart.js 文件中，可以看到一个名为 data 的对象。在该对象中，可以配置图表的数据和样式。
-- -------------------- ---- -------
---- - -
-- ----
-------- -
----- ------------- ------------- ------------- ------------- ------------- --------------
--------- --- ---- ---- ---- ---- -----
--------- ---- ---- ---- ---- ---- ---
--
----- ------
-运行项目
配置完成后，使用以下命令运行项目，并在浏览器中查看 c3 图表。
$ c3 serve
该命令将会启动一个本地服务器，并将 c3 图表渲染至浏览器中。至此，使用 c3-cli 创建并配置 c3 图表的过程已结束。
学习与指导意义
使用 c3-cli 可以简化 c3 图表的创建和配置过程，是 c3 应用开发的好帮手。通过本文的学习，你可以了解如何使用 c3-cli 来快速创建一个 line 图表，并且深入理解了如何配置 c3 图表的数据和样式。这将有助于加深对图表开发的理解和提升开发效率。
示例代码：
-- -------------------- ---- -------
----- ---- - -
-- ----
-------- -
----- ------------- ------------- ------------- ------------- ------------- --------------
--------- --- ---- ---- ---- ---- -----
--------- ---- ---- ---- ---- ---- ---
--
----- ------
--
----- ----- - -------------
----- -----
----- -
-- -
----- -------------
----- -
------- ----------
-
-
-
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f71238a385564ab6739