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>
- 效果
