在前端开发中，我们时常需要展示一些代码或者统计数据，通常使用的方式是通过图表或者数据可视化工具，比如 d3.js，chart.js，echarts 等。但是，这些工具都需要掌握一定的使用技能，且需要在代码中集成才能实现展示效果。
为了解决这个问题，有建了一个 npm 包，名为 justshow。justshow 不需要写代码，只需要在 markdown 中编写图表或者数据的文本格式，就可以自动生成对应的图表或者数据可视化图形。
本篇文章将介绍 justshow 的使用方法，包括安装、编写格式、编译生成图表和数据可视化图形等。
安装
使用 npm 安装 justshow：
--- ------- -- --------
安装成功后，就可以在命令行中使用 justshow 命令了。
编写格式
justshow 支持的图表和数据可视化图形种类比较丰富，包括散点图、折线图、柱状图、饼图、雷达图、仪表盘、热力图、地图等。不同种类的图形需要按照不同的格式编写，下面列出一些常用的图形格式。
散点图
用于展示数据的分布情况，通常由两个维度组成，X 轴和 Y 轴。格式如下：
- --- - - - - - - ---- - ------ - - -- - -- - - -- - -- - - -- - -- -
折线图
用于展示数据的趋势变化，通常由一个 X 轴和一个或多个 Y 轴组成。格式如下：
- --- - ----- - ----- - - ----- - ----- - - --- - --- - - --- - --- - - --- - --- -
柱状图
用于展示数据的大小或者变化，通常由一个 X 轴和一个或多个 Y 轴组成。格式如下：
- --- - ------- - ----- - - ------- - ----- - - - - --- - - - - --- - - - - --- -
饼图
用于展示数据的占比或者比例，通常由一个或多个部分组成。格式如下：
- -- - ---- - ----- - - ------ - ----- - - ----- - -- - - --- - -- - - ----- - -- - - ------ - -- - - ------ - -- -
其他图形类型
justshow 还支持其他类型的数据可视化图形，包括雷达图、仪表盘、热力图和地图等。具体的编写格式可以参考官方文档。
编译生成图表和数据可视化图形
编写好格式后，通过 justshow 命令编译生成对应的图表或者数据可视化图形。使用方式如下：
-------- -------- -- -----------
上面的代码中，input.md 是输入的 markdown 文件，output.html 是输出的 html 文件。执行该命令之后，就可以在浏览器中打开 output.html 文件，看到对应的图表或者数据可视化图形了。
下面是一个完整的示例代码：
- --- - ------- - ----- - - ------- - ----- - - - - --- - - - - --- - - - - --- -
执行命令：
-------- -------- -- -----------
生成的 output.html 文件内容如下：
--------- -----
------
------
------- ----------------------------------------------------------------------
-------
------
---- -----------------
--------
--- ---- - --
---------- ----
-------- ---
--
-
---------- ----
-------- ---
--
-
---------- ----
-------- ---
-
--
--- ------- - -
------ -
----- -----
--
------- --
----- --------
----- ----- ---- ----
---
------ -
----------- ----- ---- ----
-
--
--- ----- - --- ------------------------ ---------
---------------
---------
-------
-------在浏览器中打开该文件，就可以看到对应的柱状图了。
总结
使用 justshow 可以简单、方便地生成各种数据可视化图形，而不需要掌握各种图表和数据可视化工具的使用方法和技巧。希望本篇文章能够帮助大家了解 justshow 的使用方法，提高数据可视化效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066ef94c49986ca68d8758