背景

業務でドーナツ型の円グラフを表示する必要があり、JavaScriptプラグインを調べたところ、chart.jsが良さそうだったので、その時作ったサンプルのメモとしてこの記事を残しておきます。

やりたいこと

• ドーナツ型の円グラフを表示する
• ドーナツの空洞の大きさを調整する
• 蹄鉄型にする

完成系

ソースはこちら(CodePen)

空洞の大きさを調整

options.cutoutの値を設定して調整しました。
ドーナツ型の円グラフでは初期値が50になっています。

初期値のままのとき

空洞の割合を75%に変更

    options: {
        responsive: false,
        cutout: 75,
    }

空洞の割合を大きくすることで、細いドーナツ型の円グラフになります。

蹄鉄型のドーナツ円グラフ

蹄鉄型にするためには円グラフの円の長さをまずは指定します。
options.circumferenceで0~360の範囲で指定します。

さらに必要に応じて好みの向きに円を回転させます。
options.rotationで最上部を起点として時計回りに0~360または-180~180で指定します。

円の長さを280度とした場合

    options: {
        responsive: false,
        cutout: 75,
        circumference: 280,
    }

グラフを220(-140)度回転した場合

    options: {
        responsive: false,
        cutout: 75,
        rotation: 220,
        circumference: 280,
    }

これで下に向いた蹄鉄型のドーナツ円グラフが出来ました。

何もしないと隙間が出ていたので消しました

data.datasetsのborderWidthを指定しないとデフォルトで白の枠線が描画されてしまいます。
※分かりやすく背景にrbga(0,0,0,.5)を指定しています。

この枠線を消すにはborderWidthに0を指定すればOKです。

    data: {
        datasets: [{
            data: [10, 90],
            backgroundColor: ['rgba(30, 30, 116, 1)', 'rgba(0, 0, 0, 0.1)'],
            borderWidth: 0
        }],
    },

ツールチップいらん

ツールチップが必要ないときはoptions.plugins.tooltipにfalseを指定してください。

    options: {
        plugins: {
            tooltip: false
        },