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に入ることはありません。

関連ツール

GIFメーカー

連番画像や短い動画をアニメーションGIFに変換します。書き出し前にフレームレート、ループ回数、サイズを調整できます。

PNGからSVGへのベクター変換

PNGのラスター画像をブラウザ内でSVGパスに変換します。ロゴ、アイコン、線画に最適です。しきい値、色数、スムージングを調整できます。

QRコード生成ツール

テキストまたはURLから、ブラウザ内でQRコードを作成してPNGとしてダウンロードできます。

画像アップスケーラー

AI超解像または従来の補間処理で、低解像度画像を2×、3×、4×に拡大しながら重要なディテールを保ちます。

バーコードジェネレーター

Code 128、Code 39、EAN-13、UPC-A、ITF-14、Codabarで読み取り可能な1Dバーコードを作成します。印刷用にPNG、SVG、PDFで書き出せます。

写真エディター

切り抜き、回転、明るさ、コントラスト、彩度、フィルター、テキスト追加に対応し、JPG・PNG・WebPへ書き出せるブラウザベースの写真エディター。