携帯電話との時間

はじめに

このプロジェクトでは、ECharts ライブラリを使って折れ線グラフを作成する方法を学びます。このグラフは、週の各日にユーザーが携帯電話を使う時間の数を表示します。

👀 プレビュー

🎯 タスク

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

• プロジェクトをセットアップし、必要なファイルを開く方法
• ECharts の設定にあるエラーを修正する方法
• 折れ線グラフの設定を理解する方法
• 設定を変更することでグラフをカスタマイズする方法

🏆 成果

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

• ECharts ライブラリを使って折れ線グラフを作成する
• グラフのタイトル、軸、データ系列を設定する
• 設定を変更することでグラフをカスタマイズする

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

このステップでは、プロジェクトをセットアップし、エディターでファイルを開きます。

1. 右側のエディターを開きます。index.html と echarts.js の 2 つのファイルが表示されるはずです。
2. WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。
3. VM の上部にある「Web 8080」を開き、手動で更新してページを表示します。

index.html ファイルのエラーを修正する

このステップでは、index.html ファイルのエラーを修正します。

1. index.html ファイルの var option = {} セクションを見つけます。
2. 設定項目にバグがあり、軸が誤って表示される原因になっています。
3. option オブジェクトを以下のように更新します。

var option = {
  title: {
    text: "Hours spent using mobile phones"
  },
  xAxis: {
    type: "category",
    data: [
      "Monday",
      "Tuesday",
      "Wednesday",
      "Thursday",
      "Friday",
      "Saturday",
      "Sunday"
    ]
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      data: [2.5, 2, 2.6, 3.2, 4, 6, 5],
      type: "line"
    }
  ]
};

4. 上記のコードを理解しましょう。

• title プロパティは折れ線グラフのタイトルを設定します。
• xAxis プロパティは x 軸を設定し、「category」タイプに設定されており、週の曜日が表示されます。
• yAxis プロパティは y 軸を設定し、「value」タイプに設定されています。
• series プロパティはシリーズで、data は携帯電話を使用する週の各日の時間データで、type は折れ線グラフとしてのグラフのタイプです。

5. ファイルを保存し、ページを再読み込みして更新されたグラフを表示します。完成した結果は以下の通りです。

まとめ

おめでとうございます！このプロジェクトを完了しました。実力を向上させるために、LabEx でさらに多くの実験を行って練習してください。