ECharts を使ったインタラクティブな棒グラフの作成

はじめに

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

👀 プレビュー

🎯 タスク

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

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

🏆 成果

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

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

Skills Graph

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

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

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

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

ここで：

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

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

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

エラーを修正する

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

1. 提供されたプロジェクト内の index.html ファイルを開きます。
2. スクリプトタグ内のコードでは、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]
  }
]

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

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

まとめ

おめでとうございます！このプロジェクトを完了しました。実力を向上させるために、LabExでさらに多くの実験を行って練習してください。