タブレットアプリなどでは、ダッシュボード的な機能が求められます。その際にはデータを一覧したり、円グラフや棒グラフなどさまざまなチャートでデータの可視化を行うでしょう。そのため、一つのグラフ表示だけでなく、多彩なグラフ表示に対応したライブラリが必要です。

今回はグラフ表示に便利なライブラリApache EChartsを紹介します。

基本的な使い方

まずHTML側の設定です。以下のようにスクリプトを読み込み、グラフを表示するための要素を用意します。以下の例の場合、 main というIDの要素にグラフを表示します。

<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>

<div id="main" style="width: 600px;height:400px;"></div>

そして、JavaScript側でグラフを表示するためのデータを用意します。以下の例では、X軸に曜日、Y軸に数値を指定しています。そして、 type を line に指定しており、折れ線グラフを表示します。

const event = window.cordova ? "deviceready" : "DOMContentLoaded";

document.addEventListener(event, () => {
    const myChart = echarts.init(document.querySelector("#main"));
    const option = {
        xAxis: {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
            type: "value"
        },
        series: [{
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line"
        }]
    };
    myChart.setOption(option);
});

グラフの種類

Apache EChartsはさまざまなグラフを表示することができます。以下のような種類があります。

  • 折れ線グラフ
  • 棒グラフ
  • 円グラフ
  • 散布図
  • 効果散布図
  • レーダーチャート
  • ツリーマップ
  • サンバースト
  • ボックスプロット
  • キャンドルスティック
  • ヒートマップ
  • マップ
  • パラレル
  • パイチャート
  • サンキーダイアグラム
  • ファネル
  • ゲージ
  • ピクトリアルバー
  • テーマリバー

Examplesには実際に options に適用するデータ例も掲載されているので、参考にしてください。以下はエリアチャートの例です。

動的なデータの表示

Apache EChartsは動的なデータの表示にも対応しています。以下の例では、1秒ごとにランダムなデータを追加しています。追加するデータは myChart.setOption で更新しています。

const event = window.cordova ? "deviceready" : "DOMContentLoaded";

let now = new Date(1997, 9, 3);
let value = Math.random() * 1000;
let oneDay = 24 * 3600 * 1000;
// ランダムなデータを生成
function randomData() {
    now = new Date(+now + oneDay);
    value = value + Math.random() * 21 - 10;
    return {
        name: now.toString(),
        value: [
            [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/"),
            Math.round(value)
        ]
    };
}

document.addEventListener(event, () => {
    const myChart = echarts.init(document.querySelector("#main"));
    // ランダムなデータを1000個生成
    let data = [];
    for (var i = 0; i < 1000; i++) {
            data.push(randomData());
    }
    // グラフの設定
    const option = {
            title: {
                    text: "Dynamic Data & Time Axis"
            },
            tooltip: {
                    trigger: "axis",
                    formatter: function (params) {
                            params = params[0];
                            const date = new Date(params.name);
                            return (date.getDate() + "/" + (date.getMonth() + 1) + "/" + date.getFullYear() + " : " + params.value[1]);
                    },
                    axisPointer: {
                            animation: false
                    }
            },
            xAxis: {
                    type: "time",
                    splitLine: {
                            show: false
                    }
            },
            yAxis: {
                    type: "value",
                    boundaryGap: [0, "100%"],
                    splitLine: {
                            show: false
                    }
            },
            series: [{
                    name: "Fake Data",
                    type: "line",
                    showSymbol: false,
                    data: data
            }]
    };
    // 1秒ごとにデータを更新
    setInterval(function () {
        for (var i = 0; i < 5; i++) {
            data.shift();
            data.push(randomData());
        }
        myChart.setOption({
            series: [{ data }]
        });
    }, 1000);
    // グラフ表示
    myChart.setOption(option);
});

オプション

setOption(options) にはさまざまなオプションが指定できます。 options に指定できるオプションは以下の通りです。

オプション 意味
title グラフのタイトル
legend 凡例（データの種類を表示するエリア）
grid グリッド（チャートの描画領域の設定）
xAxis X軸の設定
yAxis Y軸の設定
polar 極座標系の設定
radiusAxis 極座標系における半径軸の設定
angleAxis 極座標系における角度軸の設定
radar レーダーチャートの設定
dataZoom データズーム機能の設定（チャートの部分ズーム）
visualMap ビジュアルマップ（データの視覚的マッピング）
tooltip ツールチップ（データの詳細表示）
axisPointer 軸のポインター（カーソルが軸に沿って表示される線）
toolbox ツールボックス（保存、リセットなどのツール）
brush ブラシ選択（データの選択ツール）
geo 地図のジオグラフィック座標系の設定
parallel パラレル座標系の設定
parallelAxis パラレル座標系の軸の設定
singleAxis 単一軸の設定
timeline タイムライン（時間軸アニメーションの設定）
graphic グラフィック要素の描画
calendar カレンダー表示の設定
dataset データセットの設定
aria アクセシビリティ対応の設定
series シリーズデータの設定（チャートの種類やデータ）
darkMode ダークモードの設定
color カラーパレットの設定
backgroundColor 背景色の設定
textStyle テキストスタイルの設定
animation アニメーションの有効化
animationThreshold アニメーションの適用が省略されるデータ量の閾値
animationDuration アニメーションの実行時間
animationEasing アニメーションのイージング関数
animationDelay アニメーションの遅延時間
animationDurationUpdate 更新時のアニメーション実行時間
animationEasingUpdate 更新時のアニメーションのイージング関数
animationDelayUpdate 更新時のアニメーション遅延時間
stateAnimation ステート間のアニメーション設定
blendMode ブレンドモードの設定
hoverLayerThreshold ホバーレイヤーが有効になるデータ量の閾値
useUTC UTC時間を使用するかどうか
options マルチオプションの設定
media メディアクエリによるレスポンシブ設定

backgroundColor を黒系（#000など）にすると、全体がダークモードとして表示されます。

まとめ

Apache EChartsは多彩なグラフ表示に対応しています。一度使い方を覚えてしまえば、さまざまなデータを可視化できます。ダッシュボードで利用したり、レポート機能などに組み込むと便利でしょう。また、CSSを設定することなく使えるのも便利です。

ぜひ、Apache EChartsを使ってみてください。

Apache ECharts