グラフを表示したい（円グラフ）

チャート - グラフ

グラフを表示したい（円グラフ）　

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

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

表示するデータはChartPieItemクラスをChartPieSeriesクラスに追加する事で表示されます。

【実行結果】

# グラフを表示したい（円グラフ）
Form Chart0014 {
    x = 0;
    y = 0;
    width = 440;
    height = 440;
    
    Chart chart1(chart.CHARTTYPE_PIE) {
        x = 20;
        y = 20;
        width = 400;
        height = 400;
        
        # 背景色を白にする
        BgColor = color.WHITE;
        
        # 円グラフを生成する（ChartPieSeriesクラス）
        var cs1 = createSeries(chart.SERIESTYPE_PIE);
        # プロパティ設定（ChartSeries）
        cs1.opacity = 1;                    # データ系列の透明度
        cs1.visible = true;                    # データ系列の表示制御
        # プロパティ設定（ChartPieSeries）
        cs1.endAngle = 360;                    # 終了角度
        cs1.holeSize = 0;                    # 中央の穴の大きさ（チャート本体の大きさに対する相対的な比率）    0.0～1.0（1だとチャート本体の大きさと同じ）
        cs1.hPosition = 0.5;                # 縦中心位置 0.0～1.0（0.5だと中心に表示）
        cs1.pieSize = 0.8;                    # 円の大きさ（チャート本体の大きさに対する相対的な比率） 0.0～1.0（1だとチャート本体の大きさと同じ）
        cs1.startAngle = 0;                    # 開始角度
        cs1.vPosition = 0.5;                # 横中心位置 0.0～1.0（0.5だと中心に表示）
        
        # 円グラフを形成する部品を生成する（ChartPieItemクラス）
        # データ１
        var cpi1 = new ChartPieItem;
        # プロパティ設定
        cpi1.borderWidth = 1;                            # アイテムの境界線の幅
        cpi1.borderColor = color.YELLOW;                # アイテムの境界線の色
        cpi1.color = color.YELLOW;                        # アイテムの背景色
        cpi1.label = "サンプル1";                            # ラベル文字およびフォーマット
        cpi1.labelColor = color.BLACK;                    # ラベルの文字色
        cpi1.labelDistance = 0.15;                        # アイテムとラベル間の距離　0.0～　円の半径に対する割合（1なら半径と同じ）
        cpi1.labelFont = new font("Meiryo UI");            # ラベルのフォント
        cpi1.labelPosition = chart.PIELABEL_INSIDE_HORIZONTAL;    # ラベルの表示位置　
                                                                    # PIELABEL_OUTSIDE:0:ラベルをアイテムの外側に配置
                                                                    # PIELABEL_INSIDE_HORIZONTAL:1:ラベルを水平にして、アイテムの内側に配置
                                                                    # PIELABEL_INSIDE_TANGENTIAL:2:ラベルを弧に対し平行になるように回転して、アイテムの内側に配置
                                                                    # PIELABEL_INSIDE:3:ラベルを弧に対し垂直になるように回転して、アイテムの内側に配置
        cpi1.labelVisible = true;                    # ラベルの表示制御
        cpi1.pickUp = false;                        # アイテムを強調するかどうかを指定
        cpi1.pickUpDistance = 0.15;                    # 強調時の円の中心からの距離 0.0～　円の半径に対する割合 (1なら半径と同じ)
        cpi1.value = 5;                                # アイテムの値
        # データを追加
        cs1.addItem(cpi1);
        
        # データ２
        var cpi2 = new ChartPieItem;
        # プロパティ設定
        cpi2.borderWidth = 1;
        cpi2.borderColor = color.RED;
        cpi2.color = color.RED;
        cpi2.label = "サンプル2";
        cpi2.labelColor = color.BLACK;
        cpi2.labelDistance = 0.15;
        cpi2.labelFont = new font("Meiryo UI");
        cpi2.labelPosition = chart.PIELABEL_OUTSIDE;
        cpi2.labelVisible = true;
        cpi2.pickUp = true;
        cpi2.pickUpDistance = 0.1;
        cpi2.value = 2.5;
        # データを追加
        cs1.addItem(cpi2);        
        
        # データ３
        var cpi3 = new ChartPieItem;
        # プロパティ設定
        cpi3.borderWidth = 1;
        cpi3.borderColor = color.BLUE;
        cpi3.color = color.BLUE;
        cpi3.label = "サンプル3";
        cpi3.labelColor = color.WHITE;
        cpi3.labelDistance = 0.15;
        cpi3.labelFont = new font("Meiryo UI");
        cpi3.labelPosition = chart.PIELABEL_INSIDE;
        cpi3.labelVisible = true;
        cpi3.pickUp = false;
        cpi3.pickUpDistance = 0.15;
        cpi3.value = 2.5;
        # データを追加
        cs1.addItem(cpi3);        
    }
}


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