鶏頭図

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

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

使用例

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

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

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

Name Type Description
backgroundColor Color[] データセットの円弧の塗りつぶし色。を参照してください。
borderColor Color[] データセットの円弧の境界線の色。を参照してください。
borderWidth Number[] データセットの円弧の境界線の太さ。
hoverBackgroundColor Color[] マウスオーバー時の円弧の塗りつぶし色。
hoverBorderColor Color[] マウスオーバー時の境界線の色。
hoverBorderWidth Number[] マウスオーバー時の境界線の太さ。

設定オプション

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

名前 初期値 説明
startAngle Number -0.5 * Math.PI データセットの最初の項目の円弧を描画する開始角度。
animation.animateRotate Boolean true trueの場合、グラフは回転アニメーションをします。このプロパティはoptions.animationオブジェクトにあります。
animation.animateScale Boolean true trueの場合、中央から外側に向かってグラフが拡大するアニメーションをします。

デフォルトオプション

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

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

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

データ構造

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

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

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

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

results matching ""

    No results matching ""