ECharts を使ったデータ可視化の作成

はじめに

このプロジェクトでは、ECharts ライブラリを使ってデータ可視化チャートを作成する方法を学びます。このプロジェクトの目的は、オンライン学習プラットフォームのユーザーであるルーシーが、彼女の日々の学習時間をより良く可視化できるようにすることです。

👀 プレビュー

ECharts バーチャートのプレビュー

🎯 タスク

このプロジェクトでは、以下のことを学びます。

JSON ファイルからデータを取得し、必要な情報を抽出するために処理する方法。
週間と月間の学習期間統計を表示するバーチャートを作成するために、ECharts ライブラリを使う方法。
ユーザーが週間と月間のビューを切り替えられるように、インタラクティビティを実装する方法。
ウィンドウがリサイズされたときに、チャートを動的にリサイズする方法。

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

JSON ファイルからデータを取得し、可視化のために操作すること。
学習期間統計を表示するために、ECharts バーチャートを設定してカスタマイズすること。
チャートにインタラクティビティを追加し、ユーザーの操作を処理すること。
チャートが応答性を保ち、ウィンドウのリサイズに対応できるようにすること。

プロジェクト構造をセットアップする

このステップでは、プロジェクトファイルと構造をセットアップします。以下の手順に従ってこのステップを完了します。

プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。

├── css
│   └── style.css
├── data.json
├── index.html
└── js
    ├── axios.min.js
    └── echarts.min.js

この構造では：

index.html はメインページです。
js/echarts.min.js は ECharts ファイルです。
js/axios.min.js は axios ファイルです。
css/style.css はスタイルファイルです。
data.json は学習期間のデータファイルです。

WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。

次に、VM の上部にある「Web 8080」を開き、手動で更新してページを表示します。

データの取得

このステップでは、data.json ファイルからデータを取得し、必要なデータ構造に格納する方法を学びます。

コードエディタで index.html ファイルを開きます。
JavaScript コード内の // TODO セクションを見つけます。
週間と月間のデータを格納する 2 つのオブジェクトを作成します。

// TODO
let weekData = {
  x: [],
  y: []
};

let monthData = {
  x: [],
  y: []
};

渡されたデータに基づいてチャートのオプションを更新する mySetOption() 関数を実装します。

function mySetOption(data) {
  option.xAxis.data = data.x;
  option.series[0].data = data.y;
  myChart.setOption(option);
}

axios.get() メソッドを使って data.json ファイルからデータを取得します。API コールのレスポンスは res.data.data プロパティにデータが含まれます。

axios.get("./data.json").then((res) => {
  const data = res.data.data;

  // ここでデータを処理する
});

then() メソッドのコールバック関数の中で、data オブジェクトを反復処理し、各日の学習期間データを処理します。各週と月の合計学習期間を計算し、その結果をそれぞれ weekData と monthData オブジェクトに格納します。

for (const key in data) {
  let weekCount = (monthCount = 0),
    weekNum = 1;

  for (let i = 0; i < data[key].length; i++) {
    weekCount += data[key][i];
    monthCount += data[key][i];

    if (
      (i + 1) % 7 === 0 ||
      (data[key].length - i <= 7 && i === data[key].length - 1)
    ) {
      weekData.x.push(`Week ${weekNum++} (${key})`);
      weekData.y.push(weekCount);
      weekCount = 0;
    }
  }
  monthData.x.push(key);
  monthData.y.push(monthCount);
}

データを処理した後、mySetOption() 関数を呼び出し、デフォルトで週間統計を表示するために weekData オブジェクトを渡します。

mySetOption(weekData);

この処理ステップ後のコードの効果は以下の通りです。

// TODO
let weekData = {
    x: [],
    y: []
  },
  monthData = {
    x: [],
    y: []
  };

function mySetOption(data) {
  option.xAxis.data = data.x;
  option.series[0].data = data.y;
  // リセット
  myChart.setOption(option);
}

axios.get("./data.json").then((res) => {
  const data = res.data.data;

  for (const key in data) {
    let weekCount = (monthCount = 0),
      weekNum = 1;

    for (let i = 0; i < data[key].length; i++) {
      weekCount += data[key][i];
      monthCount += data[key][i];

      if (
        (i + 1) % 7 === 0 ||
        (data[key].length - i <= 7 && i === data[key].length - 1)
      ) {
        weekData.x.push(`Week ${weekNum++} (${key})`);
        weekData.y.push(weekCount);
        weekCount = 0;
      }
    }
    monthData.x.push(key);
    monthData.y.push(monthCount);
  }
  mySetOption(weekData);
});

チャートの表示

このステップでは、ECharts ライブラリを使ってチャートの表示を切り替える方法を学びます。

コードエディタで index.html ファイルを開きます。
JavaScript コード内の mySetOption セクションを見つけます。
関数 mySetOption の後に、タブ（週間と月間）に対するイベントリスナーを追加して、ユーザーがクリックしたときにチャートを更新します。

function mySetOption(data) {
  option.xAxis.data = data.x;
  option.series[0].data = data.y;
  // リセット
  myChart.setOption(option);
}

document.querySelector(".tabs").addEventListener("click", function (e) {
  if (e.target.id === "week") {
    mySetOption(weekData);
  } else if (e.target.id === "month") {
    mySetOption(monthData);
  }
});

これらの手順で、プロジェクトが完了しました。チャートは現在、data.json ファイルから取得したデータに基づいて週間と月間の学習期間統計を表示します。最終的なページの効果は以下の通りです。

画像の説明

まとめ

おめでとうございます！このプロジェクトを完了しました。あなたは実験（Lab）をもっとたくさん行って、技術力を向上させることができます。

学びの果てしない海