メインコンテンツへスキップ
Z

ドーナツチャートメーカー

CSVからドーナツチャートを作成 — 中央が空いているのでKPIスライドに最適。PNG出力、アップロード不要。

無料 登録不要 クライアントサイド プライバシーに配慮 Updated

使い方

  1. 1 ラベルと数値の2列からなるCSVを貼り付けます。
  2. 2 デザインに合わせて凡例の表示・非表示を切り替えます。
  3. 3 完成したドーナツチャートをPNGとしてダウンロードします。

このツールを使う理由

  • ドーナツ形式のレイアウト — データや計算方法は円グラフと同じですが、中央にKPIなどを配置しやすい構造です。
  • Chart.jsは必要になったときだけ読み込まれます。
  • 引用符で囲まれたCSVセルにも対応しています。
  • 処理はすべてブラウザ側（クライアントサイド）で完結するため、データが端末の外に出ることはありません。

よくある質問

円グラフとの違いは何ですか？

見た目が中央の空いたリング状になっている点が異なるだけで、データや計算方法はまったく同じです。詳しくは<a class="underline" href="/pie-chart-maker">円グラフメーカー</a>をご覧ください。

中央にラベルを配置することはできますか？

PNGをダウンロードした後、お使いのスライド作成ツール側でKPIなどを追加してください。この方法により、本ツールに余計な依存関係を持たせずに済みます。

各項目の凡例に数値が表示されないのはなぜですか？

ライブプレビュー上で各項目にマウスを乗せると数値が確認できます。PNG出力ではデフォルトで見た目をシンプルに保つようにしています。

ドーナツチャートメーカー とは？

ドーナツチャートメーカー（Doughnut Chart Maker）は、CSVデータからブラウザ上でドーナツチャートを作成できるツールです。各項目の割合を、中央が空いたリング状の円グラフとして表示するもので、KPIダッシュボードのレイアウトにぴったりの形式です。作成したチャートはPNG画像として書き出すことができ、処理はすべてブラウザ側（クライアントサイド）で行われるため、ファイルをアップロードする必要はありません。

機能

CSVによるドーナツチャート描画

1行目をヘッダーとして読み込み、最初の2列をラベル/値のペアとして扱い、Chart.jsのdoughnutチャートタイプで各データ行を1つのリングセグメントとして描画します。

スライスの自動配色

各行には固定10色パレットから色が割り当てられ（行インデックスに応じて循環）、セグメント間には白い1pxの境界線が引かれるため、手動で色を選択しなくてもチャートの視認性が保たれます。

ワンクリックでPNGエクスポート

ダウンロードボタンは描画済みのチャートに対してcanvas.toDataURL('image/png')を呼び出し、doughnut-chart-maker.pngという名前でブラウザのダウンロードを実行します — エクスポートされる画像は、凡例の表示切り替え状態も含めて画面表示そのままを反映します。

クライアント側のみで完結、引用符付きCSVにも対応

Chart.jsはブラウザ上で動的にインポートされ、CSVパーサーはRFC 4180の引用符規則（引用符付きフィールド、埋め込まれたカンマ、エスケープされた引用符）を処理します。貼り付けたデータが端末の外に出ることはなく、アップロードやサーバー側処理は一切行われません。

例

Input

Source,Users
Organic,420
Direct,310
Referral,180
Social,140
Email,90

Output

doughnut-chart-maker.png — canvas-resolution PNG (matches the on-screen preview element size), 5 colored ring segments sized proportionally to 420/310/180/140/90, white 1px segment borders, legend shown above the chart if the 'Show legend' toggle is on

主な用途

  1. 1

    中央にラベルを重ねるKPIスライド用のリング

    指標の内訳（例：トラフィックソースの割合）を示すドーナツPNGをエクスポートし、スライド編集ツール内で中央の空白部分に主要な数値を重ねて配置します。ツール自体は中央テキストを描画しないためです。

  2. 2

    カテゴリ別割合のすばやい可視化

    カテゴリと値の2列CSV（例：アンケート回答数、予算項目）を貼り付けるだけで、表計算アプリを開かずにリングセグメントとして割合を瞬時に確認できます。

  3. 3

    再フォーマット不要で表計算ソフトの出力データを再利用

    Excelやスプレッドシートから直接コピーしたCSV行を、カンマを含む引用符付きフィールドごとそのまま貼り付けられます。内蔵のRFC 4180パーサーが引用符の処理と区切り文字の検出を自動的に行うためです。

概要

Doughnut Chart Makerは、貼り付けられた2列のCSVデータ（ラベル、値）からChart.js 4を使ってドーナツチャートを描画します。1列目をスライスのラベル、2列目を値として使用し、固定10色パレットから各行に1色ずつ割り当てます。CSVはRFC 8259ではなくRFC 4180準拠のパーサーによってクライアント側で解析され、Chart.jsは必要に応じて遅延読み込み（lazy-load）され、完成したチャートはcanvasのtoDataURLメソッドを使ってPNGとしてエクスポートされます — データがサーバーにアップロードされることはありません。

カテゴリ
クリエイター
料金
無料
プライバシー
ブラウザベース
登録
不要

参考文献

プライバシー

明記されない限り、データがブラウザの外に送信されることはありません。ドーナツチャートメーカー は完全にクライアント側で動作します — サーバーへのアップロードなし、ログなし、入力内容のトラッキングなし。

関連ツール

YouTubeサムネイルダウンローダー

YouTube動画のサムネイルを利用可能なすべての解像度でダウンロードできます。動画URLを貼り付けるだけです。

ツールを開く

Open Graphプレビュー

URLをSNSでシェアしたときにどう表示されるか確認できます。Facebook、Twitter、LinkedIn、Slackでのシェアカードをプレビューします。

ツールを開く

単語数・文字数カウント

単語数、文字数、文の数、段落数を瞬時にカウント。読書時間、朗読時間、頻出キーワードも同時に表示します。

ツールを開く

Lorem Ipsumジェネレーター

Lorem Ipsumのダミーテキストを段落・文・単語単位で生成します。HTMLタグで囲むオプションつき。

ツールを開く

Zerethon Social で作成・共有・成長しよう

無料登録。ポイントを獲得し、実績を集め、世界中のクリエイターとつながりましょう。

Zerethon を無料で試す