円グラフ(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)"
      ]
    }]
  }
});

スタイル

各弧のスタイルは以下のプロパティで指定することができます。

undefinedの場合、関連するelements.arc.*にオプションにフォールバックします。

borderAlign

borderAlignには以下の値を指定することができます。

• 'center' (初期値)
• 'inner'

'center'を指定すると、隣り合う弧の境界が重なります。 'inner'を指定すると、全ての境界線が重ならないようになります。

インタラクション

各弧のインタラクションは以下のプロパティで指定することができます。

undefinedの場合、関連するelements.arc.*にオプションにフォールバックします。

設定オプション

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

デフォルトオプション

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

データ構造

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

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

data = {
    datasets: [{
        data: [10, 20, 30]
    }],

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