こんにちは、vierです！

WEBサイトのページで、グラフやチャートを使った表示をして、裏付けのあるコンテンツを表示させるときってあると思います。

グラフやチャートをWEBページに差し込むときは、

• Excelで表を作って、グラフ変換して、右クリックで「図として保存」
• イラストレーターを立ち上げて、矩形ツールや線ツールでグラフ作って画像書き出し

このあたりの作業をしている人は多いのではないでしょうか？

でもでも、

Excelのグラフは、表示のカスタマイズ性が弱く、「あ、Excelのグラフを図として保存しているんだな」ってわかっちゃうし、イラストレーターだと、きれいには作れるけど、比率の計算したり、等幅にして整列させたりめんどいし、そもそもExcelでもイラレでも、結局画像配置だし！！

って思う人は、APEXCHARTSで実装するのがおすすめです！

ページに表示されたタイミングでダイナミックにチャートを表示してくれて、マウスを当てるとラベルとともに、データ情報も表示してくれて、しかもレスポンシブ。

今回は、APEXCHARTSの実装の仕方を見ていきます。

APEXCHARTSで表示できるチャートの種類は？

APEXCHARTSは様々なグラフ（チャート）を表示することができます。

以下のものが表示できるチャートの種類です。

• 線グラフ（line）
• 棒グラフ（縦、横）
• 積み上げグラフ
• 円グラフ
• ドーナツグラフ
• 棒グラフと線グラフのミックス
• ヒートマップ
• バブルチャート

組み合わせ次第でいろんなチャートを表示させることができます。

いくつかデモと一緒に見てきましょう。

APEXCHARTSの設定

APEXCHARTSで表示をさせるために必要な設定は、ライブラリをインクルードするだけです。

index.html...

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
// ↑APEXCHARTSのライブラリを読み込み

<script src="main.js"></script>
// ↑ jsファイルを外部読み込み

</body>

あと、チャートを表示させるためにはjsファイルでの設定が必要なので、外部ファイルを作ってこれも読み込みしておきます。

これだけで、設定の準備は完了です。

APEXCHARTSの表示例

ベーシックな線グラフのチャートを表示してみます。

日本の15〜64歳の人口推移を例にして線グラフを実装してみましょう。

参考：https://news.yahoo.co.jp/byline/fuwaraizo/20170826-00074877/

index.html<div id="line-base"></div>

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

main.jsvar options = {
    chart: { // チャートの設定
        height: 380,  //チャートの高さ指定
        type: 'line',  //  チャートの種類を指定
        zoom: {
            enabled: false
        }
    },
    dataLabels: {
        enabled: true  //ラベルを表示するかどうか
    },
    stroke: {
        curve: 'straight'  // ストロークを直線にするかなめらかにするか
    },
    series: [{
        name: "15-64歳",  //  チャートのシリーズ名
        data: [7470, 6990, 6165, 5557, 5219, 4945]  //  チャートの各数値
    }],
    title: {
        text: '日本の人口推移（15〜64歳）※万人',  //  チャートの名前
        align: 'left'  //  チャートの名前の位置
    },
    grid: {
        row: {
            colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
            opacity: 0.5
        },
    },
    yaxis: {  //  Y軸の設定
	title: {
	    text: '人口（万人）'
	}
    },
    xaxis: {  //  X軸の設定
        categories: ['2020年', '2030年', '2040年', '2050年', '2060年', '2070年'],
    },
}

var chart = new ApexCharts(
    document.querySelector("#line-base"),  //  表示させたいdivのIDを挿入
    options
);

chart.render();

jsファイルで指定をしていきます。他にもたくさんの設定がありますが、基本的な設定をしています。

デモはこちら

まとめ

WEBサイトで商品などの魅力を伝えるコンテンツを作る際に、チャートを活用すると説得力を増しますよね。

WEBサイトにアクセスを集めるためにテキストはとても大事な要素ですが、WEBサイトに来てくれた人により良い情報を伝えることも欠かせない要素です。

ぜひ、APEXCHARTSを試してみてください！

関連記事

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