はじめに
このプロジェクトでは、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]
}
]
これによりエラーが修正され、チャートが表示されるようになります。
- 変更を保存し、ページを再読み込みしてチャートを表示します。
まとめ
おめでとうございます！このプロジェクトを完了しました。実力を向上させるために、LabEx でさらに多くの実験を行って練習してください。
