Chart.js - にほんご。

円グラフ(Doughnut & Pie)

円グラフ&ドーナツグラフは、恐らく最も一般的なグラフです。 どちらのグラフも、セグメントに分割され、各セグメントは「円孤」でデータの比率を表現します。

このグラフはデータ同士の関係比率を示すのに優れています。

円グラフとドーナツグラフは事実上同じクラスですが、 1つ異なるデフォルト値として、cutoutPercentageを持っています。 このパラメータは、「円の中身を何%切り抜くか」を示します。 円グラフならば0、ドーナツグラフなら50です。

Chartのコアには2つのエイリアスが登録されています。 デフォルト値と、エイリアス以外は全く同じです。

使用例

// 円グラフの場合
var myPieChart = new Chart(ctx,{
    type: 'pie',
    data: data,
    options: options
});
// ドーナツグラフの場合
var myDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: data,
    options: options
});

データセットプロパティ

円グラフ&ドーナツグラフは、各データセットに対して、いくつかのプロパティを指定することができます。 これらは特定のデータセットの表示プロパティを設定するために使用されます。 例えば、孤の色は通常このように指定することができます。

new Chart(ctx, {
  type: "doughnut",
  data: {
    datasets:[{
      backgroundColor: [
        "rgb(255, 99, 132)",
        "rgb(54, 162, 235)",
        "rgb(255, 205, 86)"
      ]
    }]
  }
});

名称type説明
labelstring凡例とツールチップに表示するデータセットのラベル。
backgroundColorcolor[]孤を塗りつぶす色。カラーを参照してください。
borderColorcolor[]枠線の色。カラーを参照してください。
borderWidthnumber[]枠線の太さ(px)。
hoverBackgroundColorcolor[]ホバー時の塗りつぶしの色。
hoverBorderColorcolor[]ホバー時の枠線の色。
hoverBorderWidthnumber[]ホバー時の枠線の太さ。

設定オプション

円グラフ&ドーナツグラフには以下の設定オプションが定義されています。 これらのオプションは、グローバルのオプションChart.defaults.globalとマージされ、 チャートに渡されるオプションを生成します。

名称type初期値説明
cutoutPercentagenumber50 - ドーナツグラフ、
0 - 円グラフ
グラフの中心を何%切り抜くか。
rotationnumber-0.5 * Math.PI孤を表示する際にどの角度から表示するか。
circumferencenumber2 * Math.PIどの角度までの孤で表現するか。

※バウムクーヘンの1片や扇形になるようなイメージです。

animation.animateRotatebooleantruetrueの場合、チャートを回転アニメーションで表示します。 このプロパティはoptions.animationオブジェクトに含まれています。
animation.animateScalebooleanfalsetrueの場合、チャートを中心から外側に拡大するアニメーションで表示します。

デフォルトオプション

作成された各ドーナツグラフはデフォルト値を変更することができ、 このオブジェクトはChart.defaults.doughnutを使用することができます。 また円グラフにもChart.defaults.pieで変更可能なデフォルト値のクローンがあり、 唯一の違いは、cutoutPercentage0が設定されていることです。


データ構造

円グラフでは、データセットにデータポイントの配列が含まれている必要があります。 データポイントは数値でなければならず、 Chart.jsが全ての値を合計し、各データの割合を計算します。

また、ツールチップが正しく表示されるように、ラベル配列の設定も必要です。

data = {
    datasets: [{
        data: [10, 20, 30]
    }],
 
    // 他の孤をホバーした時に、凡例とツールチップに以下のラベルを表示する。
    labels: [
        'Red',
        'Yellow',
        'Blue'
    ]
};

© 2013 Chart.js is available under the MIT license

このコンテンツはChart.jsドキュメントを翻訳/改変したものです。