課題 (07:キャンバス)

作業について

今回の課題は以下のパッケージに作成してください。

パッケージの名前
j1.lesson07

作成するクラスの名前は問題ごとに指示があります。下記を参照してください

課題の提出方法については下記を参照してください。

また、別のコンピューター上に移動する際には、下記を参考にプログラムを持ち帰ってください。

新しい内容

今回、キャンバスに関する新しい内容はありません。

問題

下記のプログラムを書き換えて、2009年の気象情報を月ごとのグラフにしてキャンバスに描画してください。

package j1.lesson07;

import gpjava.Canvas;

public class PlotChartS2 {

    public static void main(String[] args) {
        new PlotChartS2().start();
    }

    void start() {
        Canvas.show();
        drawFrame();


    }

    void drawFrame() {
        Canvas.drawLine( 50,  50,  50, 400);
        Canvas.drawLine(410,  50, 410, 400);
        Canvas.drawLine( 50, 400, 410, 400);

        Canvas.drawStringRight(50, 40, "気温");
        for (int i = 0; i < 4; i++) {
            Canvas.drawLine(50, 400 - i * 100,  55, 400 - i * 100);
            Canvas.drawStringRight(45, 405 - i * 100, i * 10);
        }

        Canvas.drawStringLeft(410,  40, "降水量 (mm)");
        for (int i = 0; i < 4; i++) {
            Canvas.drawLine(405, 400 - i * 100, 410, 400 - i * 100);
            Canvas.drawStringRight(440, 405 - i * 100, i * 100);
        }

        for (int i = 0; i < 12; i++) {
            Canvas.drawLine(80 + i * 30, 400, 80 + i * 30, 395);
            Canvas.drawStringCenter(65 + i * 30, 420, (i + 1) + "月");
        }
    }

    double[] getMaxTemperature() {
        double[] array = new double[12];
        array[ 0] = 10.2;
        array[ 1] = 11.5;
        array[ 2] = 13.7;
        array[ 3] = 20.2;
        array[ 4] = 23.6;
        array[ 5] = 25.8;
        array[ 6] = 29.3;
        array[ 7] = 30.1;
        array[ 8] = 26.5;
        array[ 9] = 22.3;
        array[10] = 17.0;
        array[11] = 12.4;
        return array;
    }

    double[] getMinTemperature() {
        double[] array = new double[12];
        array[ 0] =  3.5;
        array[ 1] =  4.4;
        array[ 2] =  6.3;
        array[ 3] = 11.9;
        array[ 4] = 16.9;
        array[ 5] = 19.8;
        array[ 6] = 23.5;
        array[ 7] = 23.8;
        array[ 8] = 20.2;
        array[ 9] = 16.0;
        array[10] = 10.1;
        array[11] =  6.2;
        return array;
    }

    double[] getPrecipitation() {
        double[] array = new double[12];
        array[ 0] = 142.0;
        array[ 1] =  46.5;
        array[ 2] =  98.5;
        array[ 3] = 162.5;
        array[ 4] = 242.0;
        array[ 5] = 226.0;
        array[ 6] =  78.5;
        array[ 7] = 242.0;
        array[ 8] =  53.0;
        array[ 9] = 276.5;
        array[10] = 151.5;
        array[11] =  82.5;
        return array;
    }


}

最終的には次のようになります。

図: 1カ月ごとの気象データ

前回は3か月ごとの気象データを利用しましたが、今回は1カ月ごとの気象データを利用します。「繰り返し」を上手に利用してプログラムを書いてください。なお、今回利用する気象データも、気象庁が発表している2009年の東京で観測したものです。

初期状態では次のように外枠だけが描画された状態です。

図: 1カ月ごとの気象データ (外枠)

いくつか重要な座標をまとめておきます。

  • 外枠の左下の座標: (50, 400)
  • 1℃ごとの高さ: 10
  • 1mmごとの高さ: 1
  • 1か月の幅: 30

以下、今回描画に利用するデータです。

1月 2月 3月 4月 5月 6月 7月 8月 9月 10月 11月 12月
平均最高気温(℃) 10.2 11.5 13.7 20.2 23.6 25.8 29.3 30.1 26.5 22.3 17.0 12.4
平均最低気温(℃) 3.5 4.4 6.3 11.9 16.9 19.8 23.5 23.8 20.2 16.0 10.1 6.2
降水量(mm) 142.0 46.5 98.5 162.5 242.0 226.0 78.5 242.0 53.0 276.5 151.5 82.5

平均最高気温、平均最低気温、降水量のデータを返すメソッドとして、getMaxTemperature, getMinTeperature, getPrecipitationをすでに用意してあります。利用してください。

a. 降水量の表示

キャンバスに月ごとの降水量を、下記のように棒グラフの形式で描画してください。ただし、棒はうすい灰色 (192, 192, 192) で描画してください。今回は降水量のスケールが変わっていることに注意してください。

図: 1カ月ごとの気象データ (降水量)

ヒント

今回のグラフは1か月の幅が30なので、最初の月の棒はX座標で50から80くらいまでです。次の月は80から110、その次の月は110から140です。最初の月からnか月先はどのようになるでしょうか。

ヒント

グラフのY座標は、降水量が多いほど小さくなります。0mmのY座標は400なので、400からスタートして1mmごとに1ずつ小さくなっていきます。

b. 最高、最低気温の表示

平均最高気温、平均最低気温をそれぞれ赤色 (255, 0, 0)、青色 (0, 0, 255)の折れ線グラフでキャンバス上に描画してください。以下のようになります。

図: 1カ月ごとの気象データ (最高、最低気温)

ヒント

折れ線グラフは推移をみるためのものなので、一番左の線を引くには1月のデータだけでは足らず、1月と2月のデータを同時に使用します。12月から13月の線は存在しないため、全部で11本の線を引くことになります。このため、授業で紹介したパターンで繰り返しを行うとうまくいきません。配列の長さ(12)よりちょうど1だけ繰り返し回数を減らしてやる必要があります。

ヒント

それぞれの線は、drawLineで引けます。今回のグラフは1か月の幅が30なので、1月のX座標は65、2月は95、3月は125となります。最初の月からnか月先はどのようになるでしょうか。

c. 年間平均気温の表示

平均最高気温、平均最低気温のそれぞれの年間平均をキャンバス上に描画してください。これらはいずれもY軸と並行(左から右にまっすぐ)な線分です。平均最高気温の年間平均は橙色 (255, 128, 0)、平均最低気温の年間平均は水色 (0, 255, 255)でそれぞれ描画してください。以下のようになります。

図: 1カ月ごとの気象データ (年間平均気温)