努力は報われる

はじめに

このプロジェクトでは、ECharts を使ってある都市の過去 5 年間の作物収穫量の統計グラフを作成する方法を学びます。このプロジェクトの目的は、人々の暮らしに直接影響を与える作物収穫量の統計を通じて、実際の問題をどのように分析するかを示すことです。

👀 プレビュー

🎯 タスク

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

• プロジェクト環境をセットアップし、提供されたファイルを理解する方法
• JSON ファイルからデータを取得し、それを処理して ECharts のビジュアライゼーションを更新する方法
• 折れ線グラフと円グラフの外観とレイアウトをカスタマイズする方法

🏆 成果

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

• Axios ライブラリを使って JSON ファイルからデータを取得する
• ECharts オプションオブジェクトを操作してビジュアライゼーションを更新する
• タイトル、レイアウト、その他のプロパティを調整することでグラフをカスタマイズする

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

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

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

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

ここで：

• index.html はメインページです。
• js/echarts.min.js は ECharts ファイルです。
• js/axios.min.js は axios ファイルです。
• data.json は対応する年のトン数での穀物生産データです。

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

次に、VM の上部にある「Web 8080」を開き、ページを手動で更新して、ブラウザで以下のような表示を確認します。

データを取得する

このステップでは、データ要求を完了し、折れ線グラフと円グラフに作物収穫量データを正しく表示します。

1. index.html ファイルで、// TODO セクションを探します。
2. axios.get() メソッドを使用して、data.json ファイルからデータを取得します。

axios.get("./data.json").then((res) => {
  let data = res.data.data;
  // TODO: データを処理してオプションオブジェクトを更新する
});

3. .then() コールバックの中で、data.json ファイルからのデータを処理し、それに応じて option オブジェクトを更新します。
   • 各作物種のデータを格納するためのオブジェクト dataObj を作成します。
   • データのラベルを格納するための配列 sourceTip を作成します。
   • データをループして、dataObj と sourceTip 配列を埋めます。
   • 新しい newSource 配列を作成し、dataObj と sourceTip のデータで埋めます。
   • newSource 配列で option.dataset.source を更新します。
   • myChart.setOption(option) を呼び出して、新しいデータでチャートを更新します。

// TODO
let dataObj = {
  wheat: ["wheat"],
  soybean: ["soybean"],
  potato: ["potato"],
  corn: ["corn"]
};
let sourceTip = ["all"];

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

  for (const key1 in data) {
    sourceTip.push(key1);
    for (const key2 in data[key1]) {
      dataObj[key2].push(data[key1][key2]);
    }
  }

  let newSource = [];
  newSource.push(sourceTip);
  for (const key in dataObj) {
    newSource.push(dataObj[key]);
  }

  option.dataset.source = newSource;
  myChart.setOption(option);
});

4. index.html ファイルを保存してページを更新します。このとき、正しいデータが表示された更新された折れ線グラフと円グラフが表示されるはずです。

まとめ

おめでとうございます！このプロジェクトを完了しました。あなたは実験技術を向上させるために LabEx でさらに多くの実験を行うことができます。