timqian/chart.xkcd

これは何？

主な機能

• 01折れ線グラフをはじめ、さまざまな種類のグラフを手描き風のラフなタッチで描画します。
• 02ページ上の単一のSVG要素にすべてを描画します。
• 03ラベルとデータセットを含むシンプルなデータオブジェクトで設定できます。
• 04CDNまたはnpm経由で利用でき、ブラウザー用スクリプトとして読み込めます。
• 05タイトルとx軸・y軸のラベルに対応しています。

ユースケース

• ブログ記事やプレゼンテーションに、遊び心のあるカジュアルなグラフを追加する。
• 見積もりや計画を、企業向けではない手描き風のスタイルで図解する。
• ビルド手順なしで、静的なHTMLページに手早くグラフを埋め込む。

クイックスタート

1. 1

   ページに chart.xkcd スクリプトと SVG ノードを含めます

   <script src="https://cdn.jsdelivr.net/npm/chart.xkcd@2/dist/chart.xkcd.min.js"></script>
2. 2

   SVG 要素に対して new chartXkcd.Line を使い、折れ線グラフを作成します

収録されている特集

トピック

よくある質問

chart.xkcd とは？

SVGを使って、折れ線や棒などのグラフをxkcd風の手描きタッチで描画するJavaScriptライブラリ。 chart.xkcdは、xkcdコミックに着想を得た、ラフで漫画のような手描き風のグラフを描画するJavaScriptライブラリです。グラフはページ上の単一のSVG要素に描画されるため、スクリプトを読み込み、対象の<svg>ノードを指定するだけで使えます。

chart.xkcd は無料で使えますか？ライセンスは？

chart.xkcd は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

chart.xkcd は今もメンテナンスされていますか？

活発にメンテナンス中。chart.xkcd の最終コミットは 2026年10月21日 です。

chart.xkcd は何に使えますか？

ブログ記事やプレゼンテーションに、遊び心のあるカジュアルなグラフを追加する。 見積もりや計画を、企業向けではない手描き風のスタイルで図解する。 ビルド手順なしで、静的なHTMLページに手早くグラフを埋め込む。

chart.xkcd のインストール方法は？

ページに chart.xkcd スクリプトと SVG ノードを含めます: <script src="https://cdn.jsdelivr.net/npm/chart.xkcd@2/dist/chart.xkcd.min.js"></script> SVG 要素に対して new chartXkcd.Line を使い、折れ線グラフを作成します

chart.xkcd はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/timqian/chart.xkcd