アナログ手書き風グラフを描いてくれるJavaScriptライブラリ「roughViz.js」

「roughViz.js」のインストール

CDNから読み込んで使用することができます。

1
<script src="https://unpkg.com/rough-viz@1.0.4"></script>

npmでインストールする場合は下記を実行してください。

1
$ npm install rough-viz

使い方

適当なidでdivを作ります。

1
<div id="vis"></div>

あとは、JavaScripの部分をこう書くと。

1
<script type="text/javascript">
2
new roughViz.Bar({
3
  element: '#vis',
4
  data: {
5
    labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'],
6
    values: [10, 5, 8, 3, 2, 4, 7, 5, 3, 6]
7
  },
8
  width: 700,
9
  stroke: '#666',
10
  strokeWidth: 2,
11
  color: '#4FBAFA',
12
  fillWeight: 1,
13
  padding: .3,
14
  roughness: 5
15
});
16
</script>