棒グラフメーカー
CSVから棒グラフを作成 — 積み上げ、グループ化、横向きに対応。複数系列のデータ、PNG出力に対応し、アップロード不要。
使い方
- 1 1行目に見出し、1列目にラベルを入れたCSVデータを貼り付けます。
- 2 積み上げまたは横向きのオプションを切り替えてレイアウトを変更します。データ列が複数ある場合は、隣り合ったグループの棒、または積み上げ棒になります。
- 3 作成したグラフをPNGとしてダウンロードし、スライドやレポートに利用します。
このツールを使う理由
- 積み上げ・横向きオプション — グループ化、積み上げ、隣接棒のレイアウトをこれ一つでカバー。
- Chart.jsを遅延読み込み（レイジーロード） — 初回表示が速く、ファイルのアップロードも不要。
- 複数系列データに対応 — CSV内の数値列がそれぞれ独立した棒の系列になります。
- 引用符付きのCSVセルに対応 — フィールド内のカンマや改行も正しく扱えます。
よくある質問
別の種類のグラフが必要ですか?
<a class="underline" href="/line-chart-maker">折れ線グラフメーカー</a>、<a class="underline" href="/pie-chart-maker">円グラフ</a>、<a class="underline" href="/scatter-plot-maker">散布図メーカー</a>もお試しください — 同じCSV形式の入力に対応しています。
先にJSONをCSVに変換するにはどうすればいいですか?
<a class="underline" href="/csv-to-json">CSV / JSON変換ツール</a>を使ってデータをCSVに変換し、ここに貼り付けてください。
なぜ一部の列が表示されないのですか?
数値以外のセルはnullとして扱われ、無視されます。データ列には数値のみを入力するようにしてください。
棒グラフメーカー とは？
棒グラフメーカー（Bar Chart Maker）は、ブラウザ上でCSVデータから棒グラフを作成できるツールです。各値を長方形の棒として表示し、積み上げ・グループ化・横向きのレイアウトに複数系列のデータで対応します。完成したグラフはPNG画像として書き出すことができ、処理はすべてブラウザ内（クライアントサイド）で完結するため、ファイルをアップロードする必要はありません。
機能
CSV列から生成する複数系列の棒グラフ
最初の列以降の各数値列は独立した棒グラフのデータセットとなり、10色のパレットからそれぞれ異なる色が自動的に割り当てられます。数値でないセルはnullとして解析され、スキップされます。
積み上げ表示と横方向レイアウトの切り替え
チェックボックスにより、グラフをグループ化棒グラフと積み上げ棒グラフ(Chart.jsのscales.x/y.stacked)の間、および縦方向と横方向(Chart.jsのindexAxis: 'x' | 'y')の間で切り替えられます。
ワンクリックPNGエクスポート
Downloadは、canvas.toDataURL('image/png')を使って表示中のキャンバスをPNGデータURLとしてレンダリングし、サーバーとの通信なしでブラウザのダウンロードを実行します。
クライアントサイドのみ、アップロードなし
CSVの解析(RFC 4180準拠、カンマや改行を含む引用フィールドにも対応)とChart.jsによる描画は、いずれもブラウザ内で実行されます。CSVテキストがページの外に送信されることはありません。
例
Input
Quarter,Revenue,Cost
Q1,42,30
Q2,55,33
Q3,61,40
Q4,78,48Output
bar-chart-maker.png — canvas-sized PNG (matches the on-screen preview element, no fixed pixel dimensions), 2 bar series (Revenue, Cost) in grouped layout with a legend, colors #10b981 and #0ea5e9 at 70% fill opacity主な用途
-
1
四半期ごとの売上とコストの比較
Quarter,Revenue,Cost形式の行を貼り付けることで、期間ごとに2つの指標を比較する並列または積み上げの棒グラフをスライド資料やレポート用に作成できます。
-
2
アンケートやカテゴリ別の内訳
カテゴリラベルが長く縦方向のx軸に収まらない場合、ラベル付きの件数(ブラウザシェアやトラフィックの流入元など)を横棒グラフに変換します。
-
3
他のツールで公開する前の簡易ビジュアルチェック
BIツールやスライドで同じ構造を採用する前に、複数系列のCSVデータが積み上げまたはグループ化の棒グラフとしてどう見えるかをプレビューできます。
Bar Chart Makerは、貼り付けられたCSVテキストをHTMLキャンバス上でChart.js 4を使ってレンダリングされた棒グラフに変換します。最初の列以降の各数値列はそれぞれ独立したデータ系列となり、積み上げ棒グラフ、横方向表示(indexAxis)、凡例表示のオン/オフ切り替えに対応しています。結果はcanvas.toDataURL()を通じてPNGとしてエクスポートできます。CSVの解析とグラフの描画はすべてブラウザ側(クライアントサイド)で行われ、ファイルがサーバーにアップロードされることはありません。
- カテゴリ
- クリエイター
- 料金
- 無料
- プライバシー
- ブラウザベース
- 登録
- 不要
参考文献
- Chart.js — Bar Chart — Chart.js
- Chart.js — Cartesian Axes (stacked, indexAxis) — Chart.js
- HTMLCanvasElement.toDataURL() — MDN Web Docs
- RFC 4180 — Common Format and MIME Type for CSV Files — IETF
プライバシー
明記されない限り、データがブラウザの外に送信されることはありません。棒グラフメーカー は完全にクライアント側で動作します — サーバーへのアップロードなし、ログなし、入力内容のトラッキングなし。
関連ツール
YouTubeサムネイルダウンローダー
YouTube動画のサムネイルを利用可能なすべての解像度でダウンロードできます。動画URLを貼り付けるだけです。
ツールを開くOpen Graphプレビュー
URLをSNSでシェアしたときにどう表示されるか確認できます。Facebook、Twitter、LinkedIn、Slackでのシェアカードをプレビューします。
ツールを開く単語数・文字数カウント
単語数、文字数、文の数、段落数を瞬時にカウント。読書時間、朗読時間、頻出キーワードも同時に表示します。
ツールを開くLorem Ipsumジェネレーター
Lorem Ipsumのダミーテキストを段落・文・単語単位で生成します。HTMLタグで囲むオプションつき。
ツールを開くZerethon Social で作成・共有・成長しよう
無料登録。ポイントを獲得し、実績を集め、世界中のクリエイターとつながりましょう。