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