手書き風のチャートを実装できる非依存のJavaScriptライブラリ・「roughViz.js」

roughViz.js

roughViz.jsは手書き風のチャートを作成できる非依存のJSライブラリです

他ライブラリを必要とせず単体で動作してくれます。チャートの種類も棒チャートやドーナツ、散布図、円チャート、折れ線などよく使われるものに対応されており、今後も増える予定があるそうです

実装方法も手軽で簡単、CSVにも対応しています

動作テスト

動作サンプルです。開発者さんが用意していたものをお借りしました。簡単に使えるので手書きじゃなくても便利そう

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

↑ スクリプトを読み込みます。CDNあるのでまずはこれを使って試すとよさそうですね

new roughViz.BarH(
  {
    element: '#vis0',
    title: "SNS foo bar",
    titleFontSize: '1.5rem',
    legend: false,
    margin: {top: 50, bottom: 100, left: 160, right: 0},
    data: {
      labels: ['Twitter', 'hatena', 'facebook', 'Instagram'],
      values: [8, 4, 6, 2]
    },
    xLabel: 'Time Owned (Years)',
    strokeWidth: 2,
    fillStyle: 'zigzag-line',
    highlight: 'red',
  }
);

↑ チャートの種類を決めて初期化、タイトルやフォントサイズ、ラベルや数値などのデータを入力します

new roughViz.BarH(
    {
      element: '#vis1',
      titleFontSize: '1.5rem',
      data: 'foo.csv',
      color: 'tan',
      labels: 'name',
      values: 'health',
      title: "CSV example",
      roughness: 4,
    }
  );

↑ CSVにも対応しています

<div id="vis0"></div>

↑ 空要素を用意すれば完成です。楽でいいですね

ライセンスはMITとの事（ライセンスファイルはありませんがGithubのReadmeの最下部に記載ありました）。日本語にすると手書き風フォントではなくなりますのでその辺は、必要に応じて便宜変更してください

roughViz.js