はじめに
このプロジェクトでは、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 でさらに多くの実験を行うことができます。
