チャート作成できるJavaScriptのライブラリは色々とあるかと思いますが、手描き風のチャートが作成できるChart.xkcdについて紹介します。

Chart.xkcdとは?

https://timqian.com/chart.xkcd/ Chart.xkcdは、手描き風のチャートが作成できるJavaScriptライブラリです。数値を入力するだけで簡単にチャートが作成でき、ラインチャート、XYチャート、バーチャート、パイチャート、レーダーチャートの5つのチャートのいずれかが作成できます。 チャート上にマウスオーバーすると、数値データが表示され、コピペするだけで簡単に使えます。

ラインチャート

表示されない場合は、「Return」をクリックしてみてください。 ポピュラーなラインチャートのサンプルです。datasetsの中のlabelは、日本語で記入すると枠が広がらないので注意が必要です。

XYチャート

公開されているXYチャートのサンプルです。オプションでドットを線でつなげることもできます。

バーチャート

バーチャートのサンプルです。これもシンプルで使いやすそうです。

パイチャート

パイチャートのサンプルです。比率をみたい場合に使えそうですね。

レーダーチャート

レーダーチャートサンプルです。値を比較したいときに使用すると良さそうですね。

あわせて読みたい記事