Web画面上でグラフを生成するライブラリは様々ありますが、最近、Apache EChartsというJavaScriptライブラリを見つけましたので少し触ってみました。

試したのはApache ECharts 5.4です。

簡単に試す

Apache EChartsはCDNでも配布されているようです。

echarts.apache.org

このため、簡単に試すならこんな感じでHTMLを書きます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
    <title>Hello ECharts</title>
</head>
<body>
<div id="main" style="width: 600px;height: 400px;"></div>
<script src="mychart.js"></script>
</body>
</html>

あとはmychart.jsにApache EChartsのコードを書きます。Get Startedに書かれているコードをそのまんま。

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: 'Hello ECharts'
    },
    tooltip: {},
    legend: {
        data: ['sales']
    },
    xAxis: {
        data: ['Shirts', 'Cardigans', 'Chiffons', 'Pants', 'Heels', 'Socks']
    },
    yAxis: {},
    series: [
        {
            name: 'sales',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }
    ]
};

myChart.setOption(option);

npm

今時はnpmでライブラリ管理などをするらしいので、そのお作法に従うことにします。使い方は以下のドキュメントにあります。

echarts.apache.org

このときWebとして使うためには、JavaScriptモジュールハンドラを使う必要があります。色々なツールがありますが、ここではwebpackを使うことに。webpackのGetting Startを見ながら作業をします。

webpack.js.org

具体的には、npm install webpack webpack-cli --save-devでインストールし、webpack.config.jsonを書きます。

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
};

JavaScriptにてApache EChartsをimportします。合わせて、webpackのお作法に従い、ファイルをsrc以下に置いてファイル名も変更しておきます。

import * as echarts from 'echarts';

var index = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: 'Hello ECharts'
    },
    tooltip: {},
    legend: {
        data: ['sales']
    },
    xAxis: {
        data: ['Shirts', 'Cardigans', 'Chiffons', 'Pants', 'Heels', 'Socks']
    },
    yAxis: {},
    series: [
        {
            name: 'sales',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }
    ]
};

index.setOption(option);

HTMLから読み込むJavaScriptはwebpackで生成するファイルとなるため、HTML内でのJavaScriptファイル名を修正します。合わせてCDNの読み込みは削除します。また、dist以下に格納しておきます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello ECharts</title>
</head>
<body>
<div id="main" style="width: 600px;height: 400px;"></div>
<script src="main.js"></script>
</body>
</html>

あとはnpx webpack --config webpack.config.jsでビルドすればOK。

webpack-dev-serverを使う

開発中はいちいちビルドするのは面倒なので、webpack-dev-serverを使います。具体的な設定は以下のドキュメントに沿って行います。

webpack.js.org

npm install webpack-dev-server --save-devでインストールして、webpack.config.jsonを以下のとおり書きます。

const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    devtool: 'inline-source-map',
    devServer: {
        static: './dist'
    },
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
};