鶏頭図(PolarArea)

鶏頭図(PolarAreaChart)は円グラフと似ていますが、セグメントの角度は同じです。 代わりにセグメントの半径が値によって異なります。

このチャートは円グラフのようなデータ比較や、 値のスケールを表示したい場合に便利です。

使用例

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

データセットプロパティ

鶏頭図のデータセットには特定データセットのオプションを設定するために、 以下のオプションを含めることができます。 例えば、孤の色は通常このように設定することができます。

new Chart(ctx, {
  type: "polarArea",
  data: {
    datasets: [{
      backgroundColor: [
        "rgb(255, 99, 132)",
        "rgb(75, 192, 192)",
        "rgb(255, 205, 86)",
        "rgb(201, 203, 207)",
        "rgb(54, 162, 235)"
      ]
    }]
  }
});

スタイル

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

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

borderAlign

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

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

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

インタラクション

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

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

設定オプション

鶏頭図特有のカスタマイズオプションです。 これらのオプションは、グローバルのオプションChart.defaults.globalとマージされ、 チャートのオプションを生成します。

デフォルトオプション

作成された各鶏頭図はデフォルト値を変更することができ、 このオブジェクトはChart.defaults.polarAreaを使用することができます。 グローバルオプションを変更すると、変更後に生成されたチャートにのみ反映され、 すでに生成済みのチャートは変更されません。

例えば、全ての新しい鶏頭図で animateScale = falseを設定するには、 以下のように指定します。

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

データ構造

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

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

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

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