V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
Geeker
V2EX  ›  分享创造

在 Markdown 中生成可视化图表

  •  1
     
  •   Geeker ·
    geekplux · 2017-07-13 09:27:44 +08:00 · 8009 次点击
    这是一个创建于 2722 天前的主题,其中的信息可能已经有所发展或是发生改变。

    今天在这里给大家分享一个我做的 markdown-it 插件,能让你在 markdown 中通过几行代码就生成一个可视化图表📊。

    例子

    为什么要做这个工具

    有时候写文章需要插入一些数据来增强说服力,但是单纯的数字又不直观,所以可视化图表是必须的。紧接着就会出现一个问题:如何把图表添加到文章中。通常的做法是用一些现成的工具生成图片,然后把图片贴到文章中。这样一来就非常繁琐,尤其是用 markdown 写作时你还得把图片先上传到一个图床中。另一方面,访客阅读文章时,图片的加载比网页元素肯定更耗时。一旦加载过慢就会给阅读造成非常不好的体验。

    怎么使用

    如果你的编辑器用了 markdown-it 来做解析器,那就可以非常方便的使用 markvis。和一般的 markdown-it 插件一样:

    const md = require('markdown-it')()
    const vis = require('markvis')
    const d3 = require('d3')  // in browser environment
    const d3node = require('d3-node') // in node environment
    
    md.use(vis).render(`
      your makrdown content
    `, {
      d3,    // in browser environment
      d3node // in node environment
    })
    

    这里的选项可以参考文档

    现状

    目前这个项目是我业余抽时间写的,还比较简陋,只提供三种最常用的图表:条形图折线图饼状图。但是不要担心,你可以通过 API 来自定义新的图表。只要你会一点 d3,就都可以轻松开发出一个新的图表布局。欢迎大家来完善目前的三种基本图表,也欢迎添加你觉得有用的图表。


    另外,小弟快毕业了,要找工作,求收留

    18 条回复    2017-07-17 16:49:16 +08:00
    xss
        1
    xss  
       2017-07-13 10:02:38 +08:00
    这玩意.....
    一定要给赞一个.......!
    fan123199
        2
    fan123199  
       2017-07-13 10:08:02 +08:00
    挺不错的样子
    ilotuo
        3
    ilotuo  
       2017-07-13 10:09:53 +08:00
    曾经想过用 plantUML 画大图..
    折腾一下午后还是默默打开 processOn
    画图还是可视化好.
    Geeker
        4
    Geeker  
    OP
       2017-07-13 10:18:30 +08:00
    @ilotuo 嗯,可视化当然更符合直觉
    sunjourney
        5
    sunjourney  
       2017-07-13 10:22:16 +08:00
    这也有一个类似的:http://visdown.amitkaps.com/
    Geeker
        6
    Geeker  
    OP
       2017-07-13 10:28:33 +08:00
    @sunjourney 看了一下,他这个是基于 Vega-Lite 的。我当时想用 Vega-Lite 的,比 d3 high level,不过它对 node 的支持有问题。我当时还提了 issue。。等过段时间我再问问他作者,再试试。
    Mogugugugu
        7
    Mogugugugu  
       2017-07-13 10:30:41 +08:00
    给个 star,改天用一下
    sunjourney
        8
    sunjourney  
       2017-07-13 10:31:46 +08:00
    @Geeker #6 可以报报阿里的大腿(说不定找工作有奇效?),G2 马上要开源了,现在也可以直接用压缩版的,它的一套图表语法参照了 Vega,也挺有意思的。
    server
        9
    server  
       2017-07-13 10:33:43 +08:00
    还是 echart down 个图靠谱
    Geeker
        10
    Geeker  
    OP
       2017-07-13 11:06:48 +08:00
    @sunjourney 好的,都可以往我这个插件里加(忽然感觉我这个插件的灵活性好高。。
    Geeker
        11
    Geeker  
    OP
       2017-07-13 13:39:24 +08:00
    @server 啥意思,把 echart 整合进去?也可以
    wuyanxin
        12
    wuyanxin  
       2017-07-13 14:32:05 +08:00
    点个赞
    aksoft
        13
    aksoft  
       2017-07-13 17:02:09 +08:00
    @Geeker 整合 echart,你就火了
    zuolan
        14
    zuolan  
       2017-07-13 17:04:36 +08:00
    还不错,先 star。
    siyushin
        15
    siyushin  
       2017-07-13 18:26:09 +08:00
    这是好东东啊,一直只能在 markdown 里用 mermaid。
    Geeker
        16
    Geeker  
    OP
       2017-07-13 19:25:01 +08:00
    @aksoft 好的,不难。
    @siyushin 嗯嗯,还有啥想法或需求,可以跟我说,或者直接去提 issue
    siyushin
        17
    siyushin  
       2017-07-17 15:50:15 +08:00
    @Geeker 我有个建议,数据部分不必要求解析 json 结构,兼容更自然化的表达方式对很多人来说更好用些?或者可以直接处理 markdown 和 table 语法?
    Geeker
        18
    Geeker  
    OP
       2017-07-17 16:49:16 +08:00
    @siyushin 你这个建议可以,要不来提个 PR ?其实我这个工具的核心是 https://github.com/geekplux/markdown-it-fence,要实现你说的,感觉可以再写个 markdown-it 拓展
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1065 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 19:15 · PVG 03:15 · LAX 11:15 · JFK 14:15
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.