はじめに
このプロジェクトでは、Echarts ライブラリを使ってリアルタイムの販売ダッシュボードを作成する方法を学びます。このダッシュボードは、視覚的に魅力的で理解しやすい形式で販売と数量データを表示します。
👀 プレビュー
🎯 タスク
このプロジェクトでは、以下を学びます。
- プロジェクトをセットアップし、必要なファイルを入手する方法
index.jsファイルでの「yAxis」設定を完了する方法renderChart関数でのバックエンドデータからの値を適切なチャートオプションに正しく割り当てる方法
🏆 成果
このプロジェクトを完了すると、以下ができるようになります。
- Echarts ライブラリを使ってデータをチャートにレンダリングする
- データ可視化プロジェクト用のコードを構造化して整理する
- 非同期データの取得を行い、リアルタイムでチャートを更新する
プロジェクト構造を設定する
このステップでは、プロジェクトファイルと構造をセットアップします。以下の手順に従ってこのステップを完了します。
プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。
├── echarts.js
├── index.css
├── index.html
└── index.js
WebIDE の右下隅にある「Go Live」ボタンをクリックして、プロジェクトを実行します。
次に、VM の上部にある「Web 8080」を開き、手動で更新してページを表示します。
y 軸設定の完成
このステップでは、index.jsファイルでの「yAxis」設定をどのように完了させるか学びます。
index.jsファイルを開きます。optionオブジェクト内の「yAxis」設定を見つけます。- 「yAxis」設定を更新して、以下の要件を満たすようにします。
- 最初の項目は、
nameを「sales」とし、チャートの左側にpositionを持つものとする。 - 2 番目の項目は、
nameを「volume」とし、チャートの右側にpositionを持つものとする。
- 最初の項目は、
更新後の「yAxis」設定は以下のようになります。
yAxis: [
{
type: "value",
name: "sales",
position: "left"
},
{
type: "value",
name: "volum",
position: "right"
}
],
renderChart 関数の完成
このステップでは、index.jsファイル内のrenderChart関数をどのように完成させるか学びます。
index.jsファイルを開きます。renderChart関数を見つけます。renderChart関数内のコードを完成させて、saleObjとcountObjからの値を X 軸の時間、Y 軸の販売と数量に正しく割り当てます。
更新後のrenderChart関数は以下のようになります。
async function renderChart() {
const result = await Ajax();
document.querySelector("#result").innerText = JSON.stringify(result);
const myChart = echarts.init(document.getElementById("main"));
// Assign the values from `saleObj` and `countObj` to the appropriate options
option.xAxis.data = Object.keys(result.data.saleObj);
option.series[0].data = Object.values(result.data.saleObj);
option.series[1].data = Object.values(result.data.countObj);
myChart.setOption(option, true);
document.querySelector("#data").innerText = JSON.stringify(charData);
}
これらの手順を完了した後、あなたの販売ダッシュボードプロジェクトは完全に機能し、リアルタイムの販売と数量データを正しく表示するはずです。最終的なページの表示は以下の通りです。
まとめ
おめでとうございます！このプロジェクトを完了しました。あなたのスキルを向上させるために、LabEx でさらに多くの実験を行って練習してください。
