グラフを表示したい（割合棒グラフ）

チャート - グラフ

グラフを表示したい（割合棒グラフ）

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

次に割合棒グラフそのものをChartクラスのcreateSeriesメソッドでChartStackedBarSeriesクラスを生成します。引数には割合棒グラフを表現するchart.SERIESTYPE_PERCENTBARを指定します。

表示するデータはChartBarItemクラスのAddメソッドで追加します。ひとつの系列につき、ひとつのChartBarItemオブジェクトが必要になります。

横軸を表示する為にChartStringAxisクラスの設定をします。
ChartStringAxisクラスオブジェクトはChartクラスのgetAxisメソッドで取得できます。引数は横軸（下軸）に該当するAXISALIGN_BOTTOMです。取得したChartStringAxisオブジェクトのstringsプロパティに配列データを設定する事で横軸が表示されます。

各データの割合（パーセント）は自動で計算されます。各系列の同じ要素の合計値を100％として、各要素の割合を計算します。

【実行結果】

# グラフを表示したい（割合棒グラフ）
Form Chart0017 {
    x = 0;
    y = 0;
    width = 420;
    height = 420;
    
    Chart chart1(chart.CHARTTYPE_BAR) {
        x = 10;
        y = 10;
        width = 400;
        height = 400;
        
        # 背景色を白にする
        bgColor = color.WHITE;
        
        # 割合棒グラフを生成する（ChartStackedBarSeriesクラス）
        var cs1 = createSeries(chart.SERIESTYPE_PERCENTBAR);
        # プロパティ設定（ChartSeries）
        cs1.opacity = 1;                    # データ系列の透明度
        cs1.visible = true;                    # データ系列の表示制御
        # プロパティ設定（ChartBarSeries）
        cs1.barWidth = 0.8;                    # バーの太さ。領域に対する割合　0.0～1.0
        cs1.labelsPosition = chart.BARLABEL_CENTER;    # データ値ラベル位置
                                                        # BARLABEL_CENTER:0:バー内部の中央
                                                        # BARLABEL_INSIDE_END:1:バー内部の上側
                                                        # BARLABEL_INSIDE_BASE:2:バー内部の下側
                                                        # BARLABEL_OUTSIDE_END:3:バー外部の上側
        cs1.labelsVisible = true;            # データ値ラベル表示制御。データ値ラベルの表示/非表示指定
        
        # 割合棒グラフを形成する部品クラスを生成する（ChartBarItemクラス）
        # データ１
        var cbi1 = new ChartBarItem();
        # プロパティ設定
        cbi1.border = new border(Border.NONE,0);    # 外枠
        cbi1.barColor = color.BLACK;            # 棒の背景色    
        cbi1.title = "サンプル１";                    # 項目名ラベル文字
        cbi1.color = color.WHITE;                # データ値ラベル色
        cbi1.font = new font("Meiryo UI");        # データ値ラベルフォント
        # データの追加
        cbi1.add(20);
        cbi1.add(45);
        cs1.addItem(cbi1);
    
        # データ２
        var cbi2 = new ChartBarItem();
        # プロパティ設定
        cbi2.border = new border(Border.NONE,0);
        cbi2.barColor = color.RED;
        cbi2.title = "サンプル２";
        cbi2.color = color.WHITE;
        cbi2.font = new font("Meiryo UI");
        # データの追加
        cbi2.add(30);
        cbi2.add(20);
        cs1.addItem(cbi2);

        # グラフ下側の軸を生成する（ChartStringAxisクラス）
        var bottomAxis = getAxis(chart.AXISALIGN_BOTTOM);
        # プロパティ設定（ChartAxis）
        bottomAxis.gridLineColor = color.LGRAY;            # 軸の補助線色
        bottomAxis.gridLineVisible = true;                # 軸の補助線の表示制御
        bottomAxis.labelsAngle = 0;                        # 軸ラベル文字の角度
        bottomAxis.labelsColor = color.BLACK;            # 軸ラベル文字色
        bottomAxis.labelsFont = new font("Meiryo UI");    # 軸ラベルフォント
        bottomAxis.labelsVisible = true;                # 軸ラベルの表示制御
        bottomAxis.lineColor = color.LGRAY;                # 軸の色
        bottomAxis.title = "";                            # 軸名
        bottomAxis.titleColor = color.BLACK;            # 軸名色
        bottomAxis.titleFont = new font("Meiryo UI");    # 軸名フォント
        bottomAxis.titleVisible = true;                    # 軸名の表示制御
        bottomAxis.visible = true;                        # 軸の表示制御
        # データの追加
        var arr = new Array();
        arr[0] = "A";
        arr[1] = "B";
        bottomAxis.strings = arr;    
    }
}


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