こんにちは、vierです！

前回の記事、「WEBサイトでグラフを画像ではなくAPEXCHARTSで動きのある表示をする方法」の続編として、線グラフの少し複雑な使い方も見てみます。

関連記事

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

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

APEXCHARTSの設定と実装

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

index.html...

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

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

</body>

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

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

線グラフの線を2本表示させる

これは、線グラフのグラフ内にラインを2本表示して、複数のデータ推移を見せることができます。

今回は、東京の2017年の３か月ごと最低と最高の平均気温を線グラフで表示してみます。

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

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

main.jsvar options = {
    chart: {
        height: 480,
        type: 'line',
        shadow: {
            enabled: true,
            color: '#000',
            top: 18,
            left: 7,
            blur: 10,
            opacity: 1
        },
        zoom: {
            enabled: false
        },
        toolbar: { // ←これを指定するとグラフの右上のメニューバーが消える
            show: false
        }
    },
    colors: ['#f63', '#69c'],
    dataLabels: {
        enabled: true,
    },
    stroke: {
        curve: 'smooth'
    },
    series: [ // ←ここに2つの配列を追加すると線グラフが2本になる
        {
            name: "平均最高気温 - 2017 東京",
            data: [12.1, 23.8, 29.7, 15.9]
        },
        {
            name: "平均最低気温 - 2017 東京",
            data: [2.8, 14.9, 22.3, 8.3]
        }
    ],
    title: {
        text: '東京の2017年の３か月ごと最低と最高の平均気温',
        align: 'left'
    },
    grid: {
        borderColor: '#e7e7e7',
        row: {
            colors: ['#f3f3f3', 'transparent'],
            opacity: 0.5
        },
    },
    markers: {
        style: 'inverted',
        size: 6
    },
    xaxis: {
        categories: ['1〜3月', '4〜6月', '7〜9月', '10〜12月'],
        title: {
            text: '期間'
        }
    },
    yaxis: {
        title: {
            text: '気温'
        },
        min: 0,
        max: 36
    },
    legend: {
        position: 'top',
        horizontalAlign: 'right',
        floating: true,
        offsetY: -25,
        offsetX: -5
    }
}

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

chart.render();

jsファイルで指定をしていきます。

ポイントは、seriesに2つの配列が入っていることです。ここを増やすともう1本線を増やすことができます。とても簡単に、複数の折れ線グラフを設置することが出来ます。

デモはこちら

まとめ

設定をカスタマイズをすることで、線を増やしたり、色を変えたり、簡単にオリジナルのチャートを作ることが出来きるのが、、APEXCHARTSの特徴です。

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