SVGやCanvasの登場によって、Webの表現力は大幅に向上しています。たとえばグラフです。円グラフや棒グラフ、折れ線グラフなど多数のグラフを描くライブラリが存在します。 システムから動的に出力される場合はそうしたライブラリを使うのが良いですが、記事の中で一度切りで使いたいグラフの場合はChartbuilderを使うのが便利そうです。

Chartbuilderの使い方

こちらがメイン画面です。左側にグラフ、右側にパラメータの調整が出ています。

値を追加したり、編集するのも簡単です。

SVGのグラフなので日本語も利用できます。

二つ目の軸を追加したり、異なるグラフと混ぜて表示もできます。

生成された結果はHTMLコードまたは画像でダウンロードできます。

画像でもちゃんと日本語が表示されています。

Chartbuilderはグラフの表示を逐次確認しながら描画設定ができます。設定を変更するとアニメーションしながら切り替わっていくのが格好良いです。さらに画像出力まで含めてすべてJavaScriptだけで作られているのも利点で、サーバサイドを使っていません。

ChartbuilderはExcelやGoogleスプレッドシートを置き換えるものではありませんが、Web上にグラフを配置したい時に知っておくと便利そうなライブラリです。

ChartbuilderはHTML5/JavaScript製のオープンソース。ソフトウェア（MIT License）です。

Chartbuilder Quartz/Chartbuilder · GitHub