chart.jsの円グラフのラベルを線で指して表示する

概要

chart.jsの円グラフのラベルを線をびーっと引いてその先に表示するようにしてみたい。

完成図

f:id:mwsoft:20190719221746p:plain

バージョン情報

chart.js 2.8.0
chartjs-plugin-piechart-outlabels 1.1.2

通常の円グラフ

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

<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

ラベルが上部に表示されている。

これを完成図のような形に修正したい。

piechart-outlabelsプラグインの導入

piechart-outlabelsプラグインを利用する。

https://github.com/chartjs/chartjs-plugin-datalabelshttps://piechart-outlabels.netlify.com/

安心安全MIT License。

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

piechart-outlabelsプラグインの利用

optionsのpluginsからoutlabelsのtextとcolorを指定してみる。

    options: {
        responsive: false,
        maintainAspectRatio: false,
        plugins: {
            outlabels: {
                text: '%l\n%p',
                color: '#000',
            }
        },
        legend: {
            display: false
        }
    }

textに指定している '%l\n%p' は「label 改行 percentage」という意味。

f:id:mwsoft:20190719221840p:plain

paddingを取ってなかったので表示された凡例がcanvasの外に出てしまった。。。

paddingを追加して画面に収まるようにする。

    options: {
        responsive: false,
        maintainAspectRatio: false,
        plugins: {
            outlabels: {
                text: '%l\n%p',
                color: '#000',
            }
        },
        layout: {
            padding: {
                left: 120,
                right: 120,
            }
        },
        legend: {
            display: false
        }
    }

f:id:mwsoft:20190719222108p:plain

デフォルトだとこのように対応するパイの背景色と同色の矩形の上に表示される。

透明にしたい場合は backgroundColor: null を指定する。

下記は背景色を消して、線の太さ（lineWidth）をデフォルトの2から4に上げて、fontサイズも上げている。

        plugins: {
            outlabels: {
                text: '%l\n%p',
                color: '#000',
                backgroundColor: null,
                lineWidth: 4,
                font: {
                    resizable: false,
                    size: 20,
                }
            }
        },

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

f:id:mwsoft:20190719222534p:plain

その他、指定できるoptionは下記参照。

https://piechart-outlabels.netlify.com/options

テキストの編集

%p で表示されるパーセンテージは四捨五入されている。これを小数点まで表示したい。

任意の文字列を表示したい場合は、text に文字列ではなくfunctionを設定すると便利。

plugins: {
    outlabels: {
        text: function(ctx) {
            let label = ctx.chart.data.labels[ctx.dataIndex];
            let value = ctx.dataset.data[ctx.dataIndex];
            return '[' + label + ']' + '\n' + value + '%';
        },      
        color: '#000', 
        backgroundColor: null,
        lineWidth: 4,
        font: { 
            resizable: false,
            size: 20,
        }       
    }
},

実行結果

f:id:mwsoft:20190719223424p:plain

改定履歴

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

iMind Developers Blog

iMind開発者ブログ