鶏頭図

鶏頭図(polar area chart)は円グラフと似ていますが、各弧の角度は同じです。弧の半径は値によって異なります。

この形式のグラフは、円グラフと同様にデータを比較する際に便利というだけでなく、値の規模を比較したい場合に便利です。

使用例

new Chart(ctx, {
    data: data,
    type: 'polarArea',
    options: options
});

データセットのプロパティ

鶏頭図のデータセットには、当該のデータセットのオプションを設定するために、次のオプションを含めることができます。

設定オプション

鶏頭図に特化したカスタマイズオプションです。これらのオプションはグローバルチャートデフォルトオプションとマージされ、チャートのオプションを構成します。

デフォルトオプション

鶏頭図のオプションの初期値を変更することもできます。グローバルオプションChart.defaults.polarAreaを変更します。グローバルオプションを変更すると、変更後に作成されたチャートにのみ影響します。既存のグラフは変更されません。

たとえば、今後作成されるすべての鶏頭図で animateScale = falseと設定するには、次のようにします。

Chart.defaults.polarArea.animation.animateScale = false;

データ構造

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

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

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

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