こんにちはVIER ROGです。

今回は、「WEBサイトでグラフを画像ではなくAPEXCHARTSで動きのある表示をする方法」の続編として、ドーナツグラフの使い方を見てみます。

レスポンシブの設定を施して（breakpoint）、ウィンドウサイズによって、ドーナツグラフとラベルの位置を変更してみようと思います。

前回は、折れ線グラフの記事も書いていますので、こちらも合わせて参考にしてみて下さい。

関連記事

【折れ線グラフ複数編】JavaScriptのAPEXCHARTSを使って動きのあるチャート表示

ドーナツグラフの実装

APEXCHARTSのライブラリの読込方法や、基本的な実装方法については、下記のページで詳しくお伝えしていますので、ご覧ください。

関連記事

WEBサイトでグラフを画像ではなくAPEXCHARTSで動きのある表示をする方法

今回は、Net Applicationsから発表された、2019年5月におけるPCのブラウザのシェアをドーナツグラフで表示してみようと思います。

参考：https://news.mynavi.jp/article/20190603-836337/

ではまず、index.htmlにグラフを表示させたい場所に下記のようにコードを入れます。

index.html<div id="donut-chart"></div>

htmlファイルでは、IDをつけたdivを入れるだけです。jsでID指定されたdivにチャートが表示されるように指定していきます。

main.jsvar options = {
    chart: {
        type: 'donut', // ここでチャートの種類を設定
    },
    labels: ['Chrome', 'Firefox', 'IE', 'Edge', 'other'],
    series: [67.9, 9.5, 7.7, 5.4, 9.5],
    responsive: [{ //ここで、ブレイクポイントを設定
        breakpoint: 575, //575px以下になると・・・
        options: {
            chart: {
                width: 320 //チャートは320pxにして・・・
            },
            legend: {
                position: 'bottom' //項目を下へ・・・
            }
        }
    }]
}

var chart = new ApexCharts(
    document.querySelector("#donut-chart"),
    options
);

chart.render();

デモはこちら

まとめ

今回は、APEXCHARTSを使って、ドーナツグラフを表示させてみました。

グラフにマウスを当てるとラベルがポップアップされ、とてもわかり易く表示させることができます。

ぜひ、参考にしてみてください。