グラフを表示したい（グラフ混在）

チャート - グラフ

グラフを表示したい（グラフ混在）

Chartクラスでは、単体のグラフだけでなく、棒グラフと折れ線グラフが混在した複合グラフも作成することが可能です。

Chartクラスのコンストラクタでchart.CHARTTYPE_MULTIを指定することで、2軸を使ったグラフが生成されます。

作成したいグラフのオブジェクトはChartクラスのcreateSeriesメソッドで生成します。下記のサンプルでは棒グラフ(SERIESTYPE_BAR)、折れ線グラフ(SERIESTYPE_LINE)の2種類を使用しています。

棒グラフはChartBarItemクラスを表示させたい分だけ定義し、addメソッドで各グラフに表示したい値を追加します。折れ線グラフはcreateSeriesメソッドで表示させたい分のオブジェクトを生成し、loadメソッドで各グラフのCSVデータをロードします。

getAxisメソッドで方向軸を設定し、createSeriesメソッドの第2、3引数でグラフをどの軸に紐付けるかを指定します。

【実行結果】

Form sample {
    x = 0;
    y = 0;
    width = 849;
    height = 481;
    
    /* 折れ線グラフ用CSVデータ */
    /* データ1(東京) */
    CsvDocument csvData1;
    csvData1 << CSV() {
        0,5
        1,6
        2,9
        3,14
        4,18
        5,21
        6,25
        7,26
        8,23
        9,18
        10,12
        11,8};
    
    /* データ2(大阪) */
    CsvDocument csvData2;
    csvData2 << CSV() {
        0,6
        1,6
        2,9
        3,15
        4,20
        5,24
        6,27
        7,29
        8,25
        9,19
        10,14
        11,9};
    
    /* データ3(福岡) */
    CsvDocument csvData3;
    csvData3 << CSV() {
        0,7
        1,7
        2,10
        3,15
        4,20
        5,23
        6,27
        7,28
        8,24
        9,19
        10,14
        11,9};
    
    Chart chart1(chart.CHARTTYPE_MULTI) {
        x = 29;
        y = 29;
        width = 788;
        height = 420;
        title = "複合グラフ";
        font = new Font("ＭＳゴシック",18);

        /* 背景色の設定 */
        bgColor = Color.WHITE;
        
        /* 方向軸の取得 */
        var leftAxis = getAxis(AXISALIGN_LEFT);
        var rightAxis = getAxis(AXISALIGN_RIGHT);
        var bottomAxis = getAxis(AXISALIGN_BOTTOM);

        /* 棒グラフ */
        var cs1;
        cs1 = createSeries(SERIESTYPE_BAR, bottomAxis, leftAxis);
        cs1.barWidth = 0.9;

        /* 棒グラフのデータを設定 */
        /* データ1(東京) */
        var cbi1 = new ChartBarItem();
        cbi1.title = "降水量(東京)";
        cbi1.color = Color.BLACK;
        cbi1.barcolor = Color.BLUE;
        cbi1.add(52);
        cbi1.add(56);
        cbi1.add(118);
        cbi1.add(125);
        cbi1.add(138);
        cbi1.add(168);
        cbi1.add(154);
        cbi1.add(168);
        cbi1.add(210);
        cbi1.add(198);
        cbi1.add(96);
        cbi1.add(51);
        cs1.addItem(cbi1);

        /* データ2(大阪) */
        var cbi2 = new ChartBarItem();
        cbi2.title = "降水量(大阪)";
        cbi2.color = color.BLACK;
        cbi2.barcolor = Color.RED;
        cbi2.add(45);
        cbi2.add(62);
        cbi2.add(104);
        cbi2.add(104);
        cbi2.add(146);
        cbi2.add(185);
        cbi2.add(157);
        cbi2.add(91);
        cbi2.add(161);
        cbi2.add(112);
        cbi2.add(69);
        cbi2.add(44);
        cs1.addItem(cbi2);
        
        /* データ3(福岡) */
        var cbi3 = new ChartBarItem();
        cbi3.title = "降水量(福岡)";
        cbi3.color = color.BLACK;
        cbi3.barcolor = Color.DGREEN;
        cbi3.add(68);
        cbi3.add(72);
        cbi3.add(113);
        cbi3.add(117);
        cbi3.add(143);
        cbi3.add(255);
        cbi3.add(278);
        cbi3.add(172);
        cbi3.add(178);
        cbi3.add(74);
        cbi3.add(85);
        cbi3.add(60);
        cs1.addItem(cbi3);
        
        /* 折れ線グラフ */
        var cs2 = createSeries(SERIESTYPE_LINE, bottomAxis, rightAxis);
        cs2.markerVisible = TRUE;
        cs2.title = "平均気温(東京)";
        /* CSVデータ(東京)をロード */
        cs2.load(^.csvData1);
        
        var cs3 = createSeries(SERIESTYPE_LINE, bottomAxis, rightAxis);
        cs3.markerVisible = TRUE;
        cs3.title = "平均気温(大阪)";
        /* CSVデータ(大阪)をロード */
        cs3.load(^.csvData2);
        
        var cs4 = createSeries(SERIESTYPE_LINE, bottomAxis, rightAxis);
        cs4.markerVisible = TRUE;
        cs4.title = "平均気温(福岡)";
        /* CSVデータ(福岡)をロード */
        cs4.load(^.csvData3);

        /* 左軸の設定 */
        leftAxis.tickCount = 6;
        leftAxis.min = 0;
        leftAxis.max = 400;
        leftAxis.title = "降水量(mm)";
        leftAxis.titleColor = Color.BLUE;
        leftAxis.titleFont = new Font("ＭＳゴシック",12);
        leftAxis.titleVisible = TRUE;
        leftAxis.gridLineColor = Color.DYELLOW;
        leftAxis.gridLineVisible = TRUE;
        leftAxis.minorTickCount = 1;
        leftAxis.minorTickColor = Color.DYELLOW;
        
        /* 右軸の設定 */
        rightAxis.tickCount = 8;
        rightAxis.min = 0;
        rightAxis.max = 35;
        rightAxis.title = "平均気温(度)";
        rightAxis.titleColor = Color.DGREEN;
        rightAxis.titleFont = new Font("ＭＳゴシック",12);
        rightAxis.titleVisible = TRUE;
        rightAxis.gridLineColor = Color.YELLOW;
        rightAxis.gridLineVisible = TRUE;
        rightAxis.minorTickCount = 1;
        rightAxis.minorTickColor = Color.YELLOW;
        
        /* 下軸の設定 */
        var arr = new Array();
        arr[0] = "1月";
        arr[1] = "2月";
        arr[2] = "3月";
        arr[3] = "4月";
        arr[4] = "5月";
        arr[5] = "6月";
        arr[6] = "7月";
        arr[7] = "8月";
        arr[8] = "9月";
        arr[9] = "10月";
        arr[10] = "11月";
        arr[11] = "12月";
        bottomAxis.strings = arr;
    }
}


		Biz-Collections Bizの宝箱トップへ
		Biz/Browser DT・Biz/Designer DT TIPS集トップへ