データ可視化 | タンパク質含有量 | Echarts 円グラフ

はじめに

このプロジェクトでは、JSON ファイルからデータを取得し、異なる食品のタンパク質含有量をレンダリングし、Echarts の円グラフを作成してデータを視覚化する方法を学びます。このプロジェクトの目的は、JavaScript を使ったデータ操作とデータ可視化の実践的な経験を提供することです。

👀 プレビュー

🎯 タスク

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

Fetch API を使って JSON ファイルからデータを取得する方法
異なる食品のタンパク質含有量を Web ページにレンダリングする方法
タンパク質含有量データを視覚化するための Echarts の円グラフを作成する方法

🏆 成果

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

JSON ファイルからデータを取得してデータを処理する
取得したデータに基づいて HTML 要素を動的にレンダリングする
Echarts ライブラリを使ってインタラクティブな円グラフを作成する
データ可視化を Web アプリケーションに統合する

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

このステップでは、プロジェクトファイルと構造を設定します。以下の手順に従ってこのステップを完了します。

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

├── css
├── index.html
├── lib
└── mock
    └── data.json

その中で：

index.html はメインページです。
css はプロジェクトのスタイルを格納するフォルダです。
lib はプロジェクトの依存関係を格納するフォルダです。
mock/data.json はプロジェクトの要求で使用される JSON データです。

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

次に、VM の上部にある「Web 8080」を開き、手動で更新するとページが表示されます。

データを取得してタンパク質含有量をレンダリングする

このステップでは、提供された JSON ファイルからデータを取得し、異なる食品のタンパク質含有量をレンダリングする方法を学びます。

プロジェクトディレクトリ内の index.html ファイルを開きます。
index.html ファイル内の <script> タグの中にある TODO コメントを見つけます。
fetchData 関数の中に、以下のコードを追加して MockURL からデータを取得し、タンパク質含有量をレンダリングします。

let dataList = ref([]);
async function fetchData() {
  // TODO: 追加するコード
  let data = await fetch(MockURL).then((res) => res.json());
  data.unshift({
    name: "header",
    icon: "none"
  });
  echartsInit(data);
  dataList.value = data.slice(1);
}

return {
  echartsInit,
  fetchData
};

onMounted フックの中で、fetchData 関数を呼び出してデータを取得し、タンパク質含有量をレンダリングします。最後に、return の中で返します。

onMounted(() => {
  fetchData();
});
return {
  echartsInit,
  fetchData,
  dataList
};

取得したデータをレンダリングするために TODO: 追加するコード の下に以下のコードを HTML に追加してデータを表示します。

<div class="protein-item" v-for="data in dataList" :key="data.name">
  {{data.name}} {{data.value}}
</div>

index.html ファイルを保存し、ページを更新します。すると、.protein-container 要素に異なる食品のタンパク質含有量が表示されるはずです。

完成した結果は以下の通りです。

おめでとうございます！あなたは「食品のタンパク質を明らかにする」プロジェクトを完了しました。JSON ファイルからデータを取得し、タンパク質含有量をレンダリングし、データを視覚化するための Echarts の円グラフを作成する方法を学びました。

✨ 解答を確認して練習

まとめ

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

Echarts と JSON を使ったデータ可視化