roughViz 一个可重用，功能强大的手绘图表组件
前段时间介绍过一个chart.xkcd 的手绘图表组件，roughViz 是另外一个，同时也提供了
比较多的图表类型，api 参考文档也比较全
支持的图表类型
- Bar
- Horizontal Bar
- Donut
- Line
- Pie
- Scatter
简单使用
直接使用html 页面
- 引用组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo</title>
</head>
<body>
<div style="display: inline;">
<div id="vis0" style="display: inline;"></div>
<div id="vis1" style="display: inline;"></div>
</div>
<script src="https://unpkg.com/rough-viz@1.0.2"></script>
<script>
// create donut chart from csv file, using default options
new roughViz.Bar({
element: '#vis0', // container selection
data: 'https://raw.githubusercontent.com/jwilber/random_data/master/flavors.csv',
labels: 'flavor',
values: 'price'
});
// create Donut chart using defined data & customize plot options
new roughViz.Donut(
{
element: '#vis1',
data: {
labels: ['North', 'South', 'East', 'West'],
values: [10, 5, 8, 3]
},
title: "Regions",
width: window.innerWidth / 4,
roughness: 8,
colors: ['red', 'orange', 'blue', 'skyblue'],
stroke: 'black',
strokeWidth: 3,
fillStyle: 'cross-hatch',
fillWeight: 3.5,
}
);
</script>
</body>
</html>
- 效果
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）
2018-10-17 使用just-api 进行接口测试
2016-10-17 HTTP Proxy Servlet 代理服务使用