Chart.js - にほんご。

鶏頭図(PolarArea)

更新日: 2018-06-25

鶏頭図(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)"
      ]
    }]
  }
});

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

設定オプション

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

名称type初期値説明
startAnglenumber-0.5 * Math.PI孤を表示する際にどの角度から表示するか。
animation.animateRotatebooleantruetrueの場合、チャートを回転アニメーションで表示します。 このプロパティはoptions.animationオブジェクトに含まれています。
animation.animateScalebooleantruetrueの場合、チャートを中心から外側に拡大するアニメーションで表示します。

デフォルトオプション

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

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

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

データ構造

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

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

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

© 2013 Chart.js is available under the MIT license

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