ドーナツチャートと円グラフ

円グラフ(パイチャート)とドーナツチャートは、おそらく最も一般的に使われるチャートです。 円は弧に分割され、各部分は対応するデータの比例値を示します。

これらは、データ間の比率関係を示すのに優れています。

円グラフとドーナツチャートは本質的にChart.jsの同じクラスを使用していますが、cutoutPercentageについてのみ異なる初期値を持っています。これはグラフの何パーセントを内側から切り取るかを指定します。円グラフでは「0」、ドーナツチャートでは「50」となっています。

これらのグラフはChartコアのエイリアスとしても別々に登録されています。異なるデフォルト値と異なるエイリアス以外は、まったく同じです。

使用例

// 円グラフ
var myPieChart = new Chart(ctx,{
    type: 'pie',
    data: data,
    options: options
});

// ドーナツチャート
var myDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: data,
    options: options
});

データセットプロパティ

ドーナツチャートと円グラフでは、各データセットに対していくつかのプロパティを指定できます。 これらは、特定のデータセットの表示プロパティを設定するために使用されます。 例えば、データセットの弧の色は、一般的にこの方法で設定されます。

設定オプション

円グラフとドーナツチャートに特化したカスタマイズオプションです。これらのオプションは、グローバルチャート設定オプションとマージされ、チャートのオプションを構成します。

デフォルトオプション

ドーナツチャートの設定の初期値を変更することもできます。これはChart.defaults.doughnutで利用できます。円グラフにも同様に、Chart.defaults.pieに初期値があり変更可能です。違いはcutoutPercentageが0に設定されていることだけです。

データ構造

円グラフの場合、データセットにはデータ点の配列が含まれている必要があります。 データ点は数値でなければならず、Chart.jsはすべての数値を合計し、それぞれの相対的な割合を計算します。

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

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

    // これらのラベルは凡例とツールチップに表示されます。
    labels: [
        'Red',
        'Yellow',
        'Blue'
    ]
};