fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

markvis
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:https://markvis.js.org/
GitHub:https://github.com/geekplux/markvis
网站描述:在 markdown 中实现可视化图表的插件

什么要做这个工具

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

安装

yarn add markvis --save
npm install markvis --save

使用

yarn add markvis --save
npm install markvis --save

例子

如果你的编辑器用了 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
})


链接: https://fly63.com/nav/1817

more>>
相关栏目
SVG.js
包括各种形状、线条、文本、路径等元素
官网GitHub
d3.js
基于HTML 和 SVG 的 JavaScript 可视化库
官网GitHub
incubator-echarts
百度团队开发的一款商业级数据图表
官网GitHub
g2
一套基于可视化编码的图形语法
官网GitHub
Chartist.js
JavaScript响应式图表库
官网GitHub
MetricsGraphics.js
一个基于 D3 的简洁的数据图表优化
官网GitHub
plotly.js
基于d3.js 和stack.gl开源的 JavaScript 图表库
官网GitHub
js-sequence-diagrams
一款基于 Javascript 的Web绘制时序图的工具
官网GitHub
C3.js
基于D3.js开发的JavaScript库
官网GitHub
crossfilter
一个数据计算模型,能够很好地结合DC.JS进行数据解析绘图
官网GitHub
Processing.js
擅长创建2D和3D图象,可视化数据套件,音频,视频等
官网GitHub
flowchart.js
基于SVG的流程图插件
官网GitHub
Velocity.js
一个简单易用、高性能、功能丰富的轻量级JS动画库
官网GitHub
popmotion.js
一款小巧,灵活的 JavaScript 运动引擎
官网GitHub
js2flowchart.js
将任何 JavaScript 转换成漂亮的 SVG 流程图的可视化的图表库
点击进入GitHub
jsplumb
一个开源的流程图或拓扑图绘制工具库(绘制页面链接线)
官网GitHub

手机预览