はじめに
このプロジェクトでは、都市の一年間の気温データを表示する天気トレンドチャートを作成する方法を学びます。このチャートを使えば、ユーザーは当月のデータと次の 7 日間のデータを切り替えることができ、天気トレンドの包括的なビューを提供します。
👀 プレビュー
「当月」と「次の 7 日間」の切り替え効果を以下の図に示します。
月の切り替え効果は以下の通りです。
🎯 タスク
このプロジェクトで学ぶことは以下の通りです。
- Axios を使って JSON ファイルから天気データを取得する方法
- 月のリストをレンダリングし、クリックイベントを処理して表示されるデータを変更する方法
- 当月のデータと次の 7 日間のデータを切り替えるためのタブを実装する方法
- 天気データを表示するために Echarts チャートを初期化してカスタマイズする方法
🏆 成果
このプロジェクトを完了すると、以下のことができるようになります。
- Axios を使って JSON ファイルからデータを取得する
- Vue.js を使って応答性とインタラクティブなユーザーインターフェイスを作成する
- Echarts を使って高度な機能を備えたカスタマイズされたチャートを作成する
- ユーザーインタラクションを処理し、それに応じてチャートを更新する
- フロントエンド開発、データ可視化、ユーザーエクスペリエンスデザインの知識を適用する
プロジェクト構造をセットアップする
このステップでは、プロジェクトファイルと構造をセットアップします。以下の手順に従ってこのステップを完了してください。
プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。
├── css
│ └── style.css
├── js
│ ├── axios.js
│ ├── echarts.min.js
│ ├── vue.min.js
│ └── weather.json
└── index.html
ここで：
css/style.cssはスタイルファイルです。js/axios.jsは axios ファイルです。js/vue.min.jsは vue2.x ファイルです。js/echarts.min.jsは echarts ファイルです。js/weather.jsonは要求に必要な天気データです。index.htmlはメインページです。
WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。
次に、VM の上部にある「Web 8080」を開き、手動で更新するとページが表示されます。
天気データを取得する
このステップでは、提供された JSON ファイルから天気データを取得する方法を学びます。
index.htmlファイルで、ファイルの下部にある<script>タグを探します。<script>タグの中で、new Vue()を使って新しい Vue インスタンスを作成します。- Vue インスタンスの
dataオプションの中で、以下の属性を追加して初期値を割り当てます。
data: {
//...
data: [],
yData: [],
xData: [],
},
- Vue インスタンスの
methodsフックの中で、initChart関数の中のthis.chartOptionsを探して、xAxis と series のdataをそれぞれ対応する変数に変更します。以下のようになります。
this.chartOptions = {
//...
xAxis: [
{
//...
data: this.xData
}
],
//...
series: [
{
//...
data: this.yData
}
]
};
- Vue インスタンスの
mountedフックの中で、axios.get()メソッドを使って./js/weather.jsonファイルから天気データを取得します。修正後のコードは以下の通りです。
mounted: async function () {
const res = await axios.get("./js/weather.json");
this.data = res.data;
this.yData = res.data[0]["January"];
this.xData = [...this.yData.map((e, i) => i + 1)];
this.$nextTick(() => {
this.initChart();
});
},
このコードは JSON ファイルから天気データを取得し、data プロパティに保存し、その後チャート用の初期の yData と xData プロパティを設定します。最後に、チャートを描画するために initChart() メソッドを呼び出します。
月のリストをレンダリングする
このステップでは、月のリストをレンダリングし、クリックイベントを処理して表示されるデータを変更する方法を学びます。
index.htmlファイルで、Vue インスタンスのdataオプションの中で、以下の属性を追加して初期値を割り当てます。
data: {
//...
monthName: "January",
monthNumber: 0,
},
class="month"の<ul>要素の中で、v-forディレクティブを使って月のリストをレンダリングします。<li>要素にクリックイベントハンドラを追加して、月がクリックされたときにchangeMonth()メソッドを呼び出します。
<ul>
<li
v-for="(item,key,index) in monthList"
:class="[monthName===key?'active':'']"
@click="changeMonth(key,index)"
>
{{item}}
</li>
</ul>
- Vue インスタンスの
methodsセクションの中で、changeMonth()メソッドを追加します。このメソッドは選択された月に基づいてmonthName、monthNumber、yData、およびxDataプロパティを更新し、その後チャートを再レンダリングするためにinitChart()メソッドを呼び出します。
changeMonth(month, index) {
this.monthName = month;
this.monthNumber = index;
this.yData = this.data[index][month];
this.xData = [...this.yData.map((e, i) => i + 1)];
if (index === this.nowMonth) {
this.type = 1;
}
this.initChart();
},
当月と次の 7 日間のタブを実装する
このステップでは、ユーザーが当月のデータと次の 7 日間のデータを切り替えることができるタブを実装する方法を学びます。
index.htmlファイルで、Vue インスタンスのdataセクションに、以下のプロパティを追加します。
data: {
type: 1, // 次の 7 日間と当月のデータの状態
nowMonth: new Date().getMonth(),
},
id="currentMonth"の<div>に、monthNumberとnowMonthプロパティに基づいた条件付きレンダリングを追加します。これにより、当月のタブのみが表示されます。
<div id="currentMonth" v-if="monthNumber===nowMonth">
<div class="title">
<h3>{{typeTitle}}</h3>
<div class="type" @click="clickType($event)">
<span id="seven" :class="{'active':!type}">The next 7 days</span>
<span id="current" :class="{'active':type}">The current month</span>
</div>
</div>
</div>
- Vue インスタンスの
methodsセクションに、clickType()メソッドを追加します。このメソッドは、クリックされたタブに基づいてtype、typeTitle、yData、およびxDataプロパティを更新し、その後チャートを再レンダリングするためにinitChart()メソッドを呼び出します。
clickType(e) {
switch (e.target.id) {
case "seven":
this.type = 0;
this.typeTitle = "The next 7 days";
[this.xData, this.yData] = this.getSevenData();
break;
case "current":
this.type = 1;
this.typeTitle = "The current month";
this.yData = this.data[this.monthNumber][this.monthName];
this.xData = [...this.yData.map((e, i) => i + 1)];
break;
}
this.initChart();
},
getSevenData()メソッドを追加します。このメソッドは、次の 7 日間の x 軸のラベルと y 軸のデータを計算します。
getSevenData() {
let newXdata = [],
newYdata = [];
for (let i = 0; i < 7; i++) {
let now = new Date();
let time = now.getTime() + 1000 * 60 * 60 * 24 * i;
now.setTime(time);
newXdata.push(`${now.getMonth() + 1}/${now.getDate()}`);
if (this.monthNumber === now.getMonth()) {
newYdata.push(this.yData[now.getDate() - 1]);
} else {
let nextMonth = this.data[now.getMonth()];
for (const key in nextMonth) {
newYdata.push(nextMonth[key][now.getDate() - 1]);
}
}
}
return [newXdata, newYdata];
},
このメソッドは、月の切り替えを考慮して、次の 7 日間の x 軸のラベルと y 軸のデータを計算します。
- ファイルを保存し、ページを再読み込みして更新されたチャートを確認します。以下の図は、「当月」と「次の 7 日間」を切り替えた際の効果を示しています（時間関数を通じて取得したもので、ここでは 4 月を想定）。
月の切り替え効果は以下の通りです。
まとめ
おめでとうございます！このプロジェクトを完了しました。実験技術を向上させるために、LabEx でさらに多くの実験を行ってみましょう。
