npm 包 justshow 使用教程

阅读时长 5 分钟读完

在前端开发中,我们时常需要展示一些代码或者统计数据,通常使用的方式是通过图表或者数据可视化工具,比如 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

纠错
反馈

纠错反馈