chart.jsの円グラフの中に値を表示する

概要

chart.jsで作った円グラフのグラフ内にパーセンテージを表示するようにする。

完成図

f:id:mwsoft:20190719204313p:plain

バージョン情報

chart.js 2.8.0
chartjs-plugin-datalabels 0.6.0

通常の円グラフ

まずは最低限のコードで円グラフを生成。

<html>

<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
</head>

<body>

<div>
  <canvas id="myChart" style="border: solid 1px; width: 500px; height: 500px"></canvas>
</div>

<script>
// グラフのタイプとか値とかを設定
let config = {
    type: "pie",
    data: {
        labels: ["docomo", "au", "softbank", "other"],
        datasets: [{
            data: [39.9, 27.4, 22.3, 10.4],
            backgroundColor: [
                "rgb(255, 99, 132)",
                "rgb(255, 159, 64)",
                "rgb(240, 240, 240)",
                "rgb(54, 162, 235)"
            ]
        }],
    },
    options: {
        responsive: false
    }
};

// チャートの生成
window.addEventListener("load", function() {
    let ctx = document.getElementById("myChart").getContext("2d");
    myChart = new Chart(ctx, config);
}, false);
</script>

</body>
</html>

f:id:mwsoft:20190719204451p:plain

ここに完成図のように中に値を表示したい。

datalabelsプラグインの導入

chart.jsの生の機能だけでは実現できないので、datalabelsプラグインを使います。

https://github.com/chartjs/chartjs-plugin-datalabels

安心安全MIT License。

<!-- datalabelsプラグインを呼び出す -->
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>

呼び出すだけで画面は下記のように変わります。

f:id:mwsoft:20190719204619p:plain

テキストのスタイルや表示内容を変更する

これだと値が出るだけなので、%を付加したりフォントをもう少し見やすくしたりしてみる。

    options: {
        responsive: false,
        plugins: {
            datalabels: {
                color: '#000',
                font: {
                    weight: 'bold',
                    size: 20,
                },
                formatter: (value, ctx) => {
                    return value + '%';
                },
            }
        }
    }

これで完成図と同じ表示がされる。

f:id:mwsoft:20190719204313p:plain

ラベルと値の双方を表示する

ラベルも一緒に表示する場合の例。

ctx.chart.data.labels[ctx.dataIndex] でラベルの値が取れる。

formatter: (value, ctx) => {
    let label = ctx.chart.data.labels[ctx.dataIndex];
    return label + '\n' + value + '%';
}

f:id:mwsoft:20190719210319p:plain

上記の表示ではlegendの表示が被るので options に下記を追加して消している。

legend: {
    display: false
}

ラベルが表示される場所を調整する

デフォルトではラベルはcenterに表示される。

anchor : "end" を指定するとチャートの端に表示される。

plugins: {
    datalabels: {
        anchor: "end",
        color: "#000",
        font: {
            weight: "bold",
            size: 20,
        },
        formatter: (value, ctx) => {
            let label = ctx.chart.data.labels[ctx.dataIndex];
            return label + '\n' + value + '%';
        },
    }
},
layout: { // 凡例が入りきるように位置調整
    padding: {
        left: 50,
        right: 50,
    }
},

f:id:mwsoft:20190719230824p:plain

外まで出ないように程良く外側に表示する場合は、align, anchorにendを指定して、offsetで程よく内側に入れる。

plugins: {
    datalabels: {
        align: "end",
        anchor: "end",
        offset: -100,
        color: "#000",
        font: {
            weight: "bold",
            size: 20,
        },
        formatter: (value, ctx) => {
            let label = ctx.chart.data.labels[ctx.dataIndex];
            return label + '\n' + value + '%';
        },
    }
},

f:id:mwsoft:20190719232318p:plain

程よい。

改定履歴

Author: Masato Watanabe, Date: 2019-07-19, 記事投稿

iMind Developers Blog

iMind開発者ブログ