apexcharts.jsの使い方

JavaScript

apexcharts.jsの使い方に関するメモです。

必要なファイルの入手

APEXCHARTSからapexcharts-bundle.zipをダウンロードする。

フォルダー構成

apexcharts-bundle.zipを解凍してCSSとJavaScriptを以下のように配置する。

apexcharts
├── css
│   └── apexcharts.css
├── js
│   ├── apexcharts.common.js
│   ├── apexcharts.esm.js
│   ├── apexcharts.js
│   ├── apexcharts.min.js
│   └── locales
│       ├── de.json
│       ├── el.json
│       ├── en.json
│       ├── es.json
│       ├── fr.json
│       ├── hi.json
│       ├── pt-br.json
│       └── ru.json
└── test.html

実行結果

サンプルコード

  • ベーシック

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link href="css/apexcharts.css" rel="stylesheet">
<style type="text/css">
    #chart{
        max-width: 640px;
        margin: 10px;
    }
</style>
<title>サンプル</title>
</head>
<body>
<div id="chart"></div>
<script src="js/apexcharts.min.js"></script>
<script>
    var options = {
        chart: {
            height: 350,
            type: 'line',
            zoom: {
                enabled: false
            }
        },
        dataLabels: {
            enabled: false
        },
        stroke: {
            curve: 'straight'
        },
        series: [{
            name: "Desktops",
            data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
        }],
        title: {
            text: 'Product Trends by Month',
            align: 'left'
        },
        grid: {
            row: {
                colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
                opacity: 0.5
            },
        },
        xaxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
        }
    }

    var chart = new ApexCharts(
        document.querySelector("#chart"),
        options
    );
    chart.render();
</script>
</body>
</html>

  • リアルタイム

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link href="css/apexcharts.css" rel="stylesheet">
<style type="text/css">
    #chart{
        max-width: 640px;
        margin: 10px;
    }
</style>
<title>サンプル</title>
</head>
<body>
<div id="chart"></div>
<script src="js/apexcharts.min.js"></script>
<script>
    var lastDate = 0;
    var data = []
    function getDayWiseTimeSeries(baseval, count, yrange) {
        var i = 0;
        while (i < count) {
            var x = baseval;
            var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;

            data.push({
                x, y
            });
            lastDate = baseval
            baseval += 86400000;
            i++;
        }
    }

    getDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 10, {
        min: 10,
        max: 90
    })

    function getNewSeries(baseval, yrange) {
        var newDate = baseval + 86400000;
        lastDate = newDate
        data.push({
            x: newDate,
            y: Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min
        })
    }

    function resetData(){
        data = data.slice(data.length - 10, data.length);
    }

    var options = {
        chart: {
            height: 350,
            type: 'line',
            animations: {
                enabled: true,
                easing: 'linear',
                dynamicAnimation: {
                    speed: 2000
                }
            },
            toolbar: {
                show: false
            },
            zoom: {
                enabled: false
            }
        },
        dataLabels: {
            enabled: false
        },
        stroke: {
            curve: 'smooth'
        },
        series: [{
            data: data
        }],
        title: {
            text: 'Dynamic Updating Chart',
            align: 'left'
        },
        markers: {
            size: 0
        },
        xaxis: {
            type: 'datetime',
            range: 777600000,
        },
        yaxis: {
            max: 100
        },
        legend: {
            show: false
        },
    }

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

    chart.render();

    var dataPointsLength = 10;

    window.setInterval(function () {
        getNewSeries(lastDate, {
            min: 10,
            max: 90
        })

        chart.updateSeries([{
            data: data
        }])
    }, 2000);

    // every 60 seconds, we reset the data 
    window.setInterval(function() {
        resetData()
        chart.updateSeries([{
            data
        }], false, true)
    }, 60000);
</script>
</body>
</html>

    参考資料

  • APEXCHARTS > DEMOS

前の記事 次の記事