ECharts を使ってインタラクティブな棒グラフを作成 | データ可視化

はじめに

このプロジェクトでは、ECharts JavaScript ライブラリを使って棒グラフを作成し、学生の成績統計を表示する方法を学びます。ECharts は強力なデータ可視化ツールで、データを提示するためのインタラクティブで視覚的に魅力的なチャートを作成するのに役立ちます。

👀 プレビュー

🎯 タスク

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

初期コードのエラーを修正して、チャートを正しく表示する方法
x 軸と y 軸の設定を変更して、チャートが正しい方向に表示されるようにする方法
シリーズ内のデータを調整して、x 軸のラベルの順序に合わせる方法

🏆 成果

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

ECharts インスタンスを初期化し、チャートオプションを設定する
x 軸と y 軸のプロパティを定義して、チャートの外観を制御する
シリーズ内のデータを更新して、望ましい可視化に合わせる

プロジェクト構造を設定する

このステップでは、プロジェクト構造を設定し、必要なファイルとフォルダを準備します。

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

├── echarts.js
└── index.html

ここで：

index.html はメインページです。
js/echarts.js は ECharts ファイルです。

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

次に、VM の上部にある「Web 8080」を開き、ページを手動で更新するとページが空になっていることがわかります。このとき、コンソールを開くと、以下のエラーメッセージが表示されます。

✨ 解答を確認して練習

エラーを修正する

このステップでは、プロジェクト内のエラーを修正して、チャートを表示できるようにする方法を学びます。

提供されたプロジェクト内の index.html ファイルを開きます。
スクリプトタグ内のコードでは、x 軸が未定義であることがわかりました。echars チャートでは、データがあろうとなかろうと、x 軸と y 軸の両方が定義されている必要があります。したがって、TODO の下の var option = {...}; の下のコードに対して、以下のように変更を加えました。

// TODO
// xAxis
xAxis: {
  data: ["Tom", "Tony", "Lucas", "Lucy", "Anna", "Kevin"]
},
// yAxis
yAxis: {},
series: [
  {
    name: "grades",
    type: "bar",
    data: [55, 90, 65, 70, 80, 63]
  }
]

これによりエラーが修正され、チャートが表示されるようになります。

変更を保存し、ページを再読み込みしてチャートを表示します。