課題 (06:キャンバス)

作業について

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

パッケージの名前
j1.lesson06

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

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

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

新しい内容

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

問題

作成するクラスの名前
PlotChartS2

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

package j1.lesson06;

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, "気温");
        Canvas.drawLine( 50, 100,  55, 100);
        Canvas.drawLine( 50, 200,  55, 200);
        Canvas.drawLine( 50, 300,  55, 300);
        Canvas.drawStringRight(45, 105, "30");
        Canvas.drawStringRight(45, 205, "20");
        Canvas.drawStringRight(45, 305, "10");
        Canvas.drawStringRight(45, 405, "0");

        Canvas.drawStringLeft(410,  40, "降水量 (mm)");
        Canvas.drawLine(405, 100, 410, 100);
        Canvas.drawLine(405, 150, 410, 150);
        Canvas.drawLine(405, 200, 410, 200);
        Canvas.drawLine(405, 250, 410, 250);
        Canvas.drawLine(405, 300, 410, 300);
        Canvas.drawLine(405, 350, 410, 350);
        Canvas.drawStringRight(440, 105, "600");
        Canvas.drawStringRight(440, 155, "500");
        Canvas.drawStringRight(440, 205, "400");
        Canvas.drawStringRight(440, 255, "300");
        Canvas.drawStringRight(440, 305, "200");
        Canvas.drawStringRight(440, 355, "100");
        Canvas.drawStringRight(440, 405, "0");

        Canvas.drawLine(140, 400, 140, 395);
        Canvas.drawLine(230, 400, 230, 395);
        Canvas.drawLine(320, 400, 320, 395);
        Canvas.drawStringCenter( 95, 420, "1-3月");
        Canvas.drawStringCenter(185, 420, "4-6月");
        Canvas.drawStringCenter(275, 420, "7-9月");
        Canvas.drawStringCenter(365, 420, "10-12月");
    }

    double[] getMaxTemperature() {
        double[] temperature = new double[4];
        temperature[0] = 11.8;
        temperature[1] = 23.2;
        temperature[2] = 28.6;
        temperature[3] = 17.2;
        return temperature;
    }


}

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

図: グラフの描画

今回利用する気象データは、気象庁が発表している2009年の東京で観測したものです。

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

図: グラフの描画 (外枠)

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

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

a. 最高気温の表示

getMaxTemperatureメソッドは、長さ4の配列に順に

  • 1月から3月までの平均最高気温、
  • 4月から6月までの平均最高気温、
  • 7月から9月までの平均最高気温、
  • 10月から12月までの平均最高気温、

を代入したものを返します。これを利用して、次のような折れ線グラフをキャンバスに描画してください。

図: 最高気温の表示

このとき、折れ線グラフは赤色 (255, 0, 0) で描画してください。・

ヒント

それぞれの線は、drawLineで引けます。折れ線グラフは推移をみるためのものなので、一番左の線を引くには1-3月のデータだけでは足らず、1-3月と4-6月のデータを同時に使用します。

ヒント

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

b. 最低気温の表示

次に、同じキャンバスに平均最低気温を描画してください。平均最高気温と同じ条件の平均最低気温は下記の通りです。

1-3月 4-6月 7-9月 10-12月
4.7℃ 16.2℃ 22.5℃ 10.8℃

このデータを利用して、次のような折れ線グラフをキャンバスに描画してください。最低気温の折れ線グラフは、青色 (0, 0, 255) で描画してください。・

図: 最低気温の表示

ヒント

「(最高最低を問わず)気温を折れ線グラフで描画する」というメソッドがあれば楽です。

c. 降水量の表示

次に、同じキャンバスに降水量を描画してください。ただし、気温のように折れ線グラフではなく、棒グラフを使います。平均最高気温と同じ条件の降水量は下記の通りです。

1-3月 4-6月 7-9月 10-12月
287.0mm 630.5mm 373.5mm 510.5mm

このデータを利用して、次のような棒グラフをキャンバスに描画してください。それぞれの棒の色はうすい灰色 (192, 192, 192) です。

図: 降水量の表示