Softonic

円グラフ作成ツール

ステップ 1 / 3

グラフデータ

表計算ファイルをアップロードせずに、小規模なカテゴリーデータを見やすい円グラフやドーナツグラフにできます。項目名と値を入力するか、CSVまたはタブ区切りデータを貼り付け、色、データラベル、凡例の位置、開始角度を調整します。プレビューにはテキストによる要約とアクセシブルなデータ表も表示されます。書き出しはブラウザー内で処理され、1200 × 800のPNGまたは拡大しても鮮明なSVGとして保存できます。円グラフは、意味のある1つの全体を構成する、少数の0以上の項目を示す場合に適しています。

円グラフの作り方

  1. 1

    項目を入力する

    項目名と値の行を追加するか、2列のCSVまたはタブ区切りデータを貼り付けます。

  2. 2

    見た目を整える

    円グラフまたはドーナツグラフ、配色、データラベル、凡例の位置、並べ替え、開始角度を選びます。

  3. 3

    アクセシブルな結果を確認する

    グラフ、代替テキスト、表に示された正確な値と割合を確認します。

  4. 4

    グラフを書き出す

    1200 × 800のPNGまたはSVGを保存するか、元データをCSVとしてコピーします。

円グラフで分かること

円グラフでは、各正の値を360°の円周上の角度に置き換えます。ある項目の値が v、表示対象の値の合計が T の場合、その中心角は 360 × v / T、表示割合は 100 × v / T です。ドーナツグラフも比率の計算は同じで、中央をくり抜いて表示するだけです。比較の仕組み自体は変わりません。

項目 値 割合 扇形の角度
商品 45 45% 162°
サービス 30 30% 108°
サポート 25 25% 90°

この例の合計は100なので、商品は 45 / 100 × 360 = 162° を占めます。0は入力できますが面積がないため円には表示されません。負の値、未入力、有限でない値は、通常の「全体に対する部分」を表せないため使用できません。少なくとも1項目は0より大きい必要があります。

別のグラフを選ぶべき場合

円グラフは、扇形の数が少なく、各値の差がはっきりしていると読み取りやすくなります。値が近い、項目数が多い、正確な比較が重要、または項目が1つの合計を構成しない場合は、一般に棒グラフの方が適しています。時系列の変化には折れ線グラフが向いています。重複する割合を足したり、同じ値を二重計上したりしないでください。見た目を整えても、合計の定義が誤っていれば正しいグラフにはなりません。

色、ラベル、アクセシビリティ

意味を色だけに頼らせないことが大切です。凡例または扇形のデータラベルを残し、併記される表も確認してください。幅広い人に共有する場合は、色覚多様性に配慮した配色を選べます。小さな扇形には円内の文字が収まらないことがありますが、項目名、値、割合は凡例とデータ表で確認できます。SVGは編集や高精細な印刷に、固定サイズの1200 × 800 PNGはスライド、文書、SNS投稿に便利です。

グラフはブラウザーのSVG APIとCanvas APIで生成され、グラフデータが外部の作図サービスへ送信されることはありません。複数ステップの進行状況は、このタブのセッションストレージに一時保存されます。最初からやり直すか、タブを閉じると消去できます。

詳しくは、Datawrapperの円グラフは少数の項目で作るためのガイド、W3Cのアクセシブルなデータ表のチュートリアル、MDNのSVG画像を<desc>で説明する方法も参照してください。

よくある質問

はい。項目名と値が入った2列をコピーして、インポート欄へ貼り付けてください。表計算ソフトのタブ区切り行、カンマ区切りCSV、セミコロン区切りの行に対応し、引用符で囲まれたCSVの項目名も読み取れます。

0には角度方向の面積がないため、入力はできますが円には表示されません。負の値は通常の全体に対する扇形として表せないため使用できません。少なくとも1項目は0より大きい必要があります。

どちらも割合の表し方は同じです。全体と各部分の関係を直接示すなら円グラフ、中央に合計を表示したいならドーナツグラフが便利です。正確な値の比較を重視する場合は棒グラフを選びましょう。

生成されるSVGにはテキストによる要約があり、各扇形にも説明が付きます。ページには、表示対象のすべての項目名、値、割合を収めた一般的な表も用意されます。別の場所で公開する場合も、表または同等のテキスト説明を添えてください。

いいえ。行データ、タイトル、デザイン設定はブラウザー内にとどまります。複数ステップの操作中は、このタブのセッションストレージだけに保存されます。PNGとSVGも端末内で生成され、データがURLに入ることはありません。

関連ツール

方眼紙ジェネレーター

印刷できる方眼紙をオンラインで作成：方眼またはドット罫を選び、間隔をmmで設定し、A4かLetterと好きな線の色を指定して、印刷または鮮明なSVGでダウンロードできます。

LEGOモザイク作成ツール

写真を16、32、48、64マス四方のモザイク案に変換。近似色のプレビュー、1×1プレートの色別枚数、番号付き組み立てガイドを確認できます。

五線譜用紙ジェネレーター

印刷用の五線譜用紙を作成：空白の五線、ト音記号・ヘ音記号、ピアノ用大譜表、ギター用タブ譜。段数、線間隔、A4かレターサイズ、余白を選び、PDFまたはSVGで保存できます。

スプライトシート分割ツール

グリッドまたは自動検出でスプライトシートを分割し、各フレームを修正してPNG、ZIP、frames.jsonを端末上で出力します。

抽選券作成ツール

気軽なイベント向けに、連番付きの2片式チケットシートを非公開で作成します。A4またはUS Letterの全ページを印刷するか、現在のページをダウンロードできます。

アバターメーカー

ブラウザ上でフラットなイラストアバターを作成できます。肌の色、髪、目、口、服、背景、表示名を選び、SVGまたはPNGでダウンロードできます。

このツールは他の言語でも利用できます