Chart.xkcd

Chart.xkcdは手書き風のチャートを生成できるJavaScriptライブラリです。上デモのような手書きっぽいチャートを作る事が出来ます。

xkcdはご存知の方も多いと思いますが、海外のWeb漫画です。元NASAのプログラマーだったランドール氏によるもの。棒人間で書かかれる特徴的なイラストはどこかで見たことがある方も多いかもしれませんね。

チャートは棒グラフや円グラフなどそれなりに対応可能です。そのままだと日本語は手書き風にはならないので統一したスタイルにするなら手書き風のWebフォントを別途読み込んで使う形になりそうです。

使い方もシンプルです。非依存なので本ライブラリだけ読み込んでSVGを用意して数値をセッティングするだけ。

<svg class="bar-chart" width="600" height="400" ></svg>
<script src="chart.xkcd.js"></script><!--スクリプト読み込み-->
<script>
  const svg = document.querySelector('.bar-chart')//classを指定

  new chartXkcd.Bar(svg, {
    data: {
      labels:['foo', 'bar'],//表示するラベル
      datasets: [{
        data: [10, 28],//数値
      }]
    },
  });
</script>

簡単ですね。

使わせていただく機会はあまりなさそうですけど面白かったので備忘録として。ライセンスはMITとの事です。

Chart.xkcd