グラフを表示したい（折れ線グラフ）

チャート - グラフ

グラフを表示したい（折れ線グラフ）

折れ線グラフを表示するにはまずChartクラスのコンストラクタでchart.CHARTTYPE_XYを指定します。これでグラフの土台が生成されます。

次に折れ線グラフそのものをChartクラスのcreateSeriesメソッドで生成します。引数には折れ線グラフを表現するchart.SERIESTYPE_LINEを指定します。

表示するデータはCSVDocumentクラスを使用するか、AddItemメソッドなどを使用する事で追加する事ができます。

【実行結果】

# グラフを表示したい（折れ線グラフ）
Form Chart0013 {
    x = 0;
    y = 0;
    width = 849;
    height = 481;
    
    CsvDocument csvdataA;
    CsvDocument csvdataB;
    CsvDocument csvdataC;
    
    csvdataA << CSV {
        0,147
        1,63
        2,112
        3,180
        4,36
        5,189
        6,124
        7,128
        8,108
        9,73
        10,104};
    csvdataB << CSV {
        0,165
        1,116
        2,126
        3,22
        4,140
        5,194
        6,43
        7,147
        8,95
        9,36
        10,10};
    csvdataC << CSV {
        0,122
        1,133
        2,32
        3,151
        4,171
        5,146
        6,111
        7,170
        8,101
        9,136
        10,128};

    Chart chart1(chart.CHARTTYPE_XY) {
        x = 29;
        y = 29;
        width = 788;
        height = 420;
        
        # 背景色を白にする
        bgColor = color.WHITE;
        
        # 縦軸の設定をする
        var AxisLeft = getAxis(chart.AXISALIGN_LEFT);
        AxisLeft.title = "縦軸ラベル";
        AxisLeft.min = 0;
        AxisLeft.max = 200;
        AxisLeft.tickCount = 5;
        AxisLeft.titleFont = new Font("Meiryo UI");
        
        # 横軸の設定をする
        var AxisBottom = getAxis(chart.AXISALIGN_BOTTOM);
        AxisBottom.title = "横軸ラベル";
        AxisBottom.min = 0;
        AxisBottom.max = 10;
        AxisBottom.tickCount = 11;
        
        # 折れ線グラフを生成する（店舗Ａ）
        var cs1 = createSeries(chart.SERIESTYPE_LINE);
        # プロパティ設定
        cs1.title = "サンプル１";
        cs1.color = color.RED;
        # データ設定
        cs1.load(Chart0013.csvdataA);
        
        # 折れ線グラフを生成する（店舗Ｂ）
        var cs2 = createSeries(chart.SERIESTYPE_LINE);
        # プロパティ設定
        cs2.title = "サンプル２";
        cs2.color = color.GREEN;
        cs2.markerVisible = true;
        # データ設定
        cs2.load(Chart0013.csvdataB);
        
        # 折れ線グラフを生成する（店舗Ｃ）
        var cs3 = createSeries(chart.SERIESTYPE_LINE);
        # プロパティ設定
        cs3.title = "サンプル３";
        cs3.color = color.BLUE;
        cs3.labelsVisible = true;
        cs3.width = 10;
        # データ設定
        cs3.load(Chart0013.csvdataC);
    }
}


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