グラフカスタマイズ-円グラフのカスタマイズ

Curlでは様々なグラフが提供されており、また色々とカスタマイズが可能ですが、どのようにカスタマイズしたらよいか悩んでいる人もいるのではないでしょうか。

このシリーズでは、円グラフのカスタマイズ例をご紹介していきます。

まず、Curlの円グラフはPieSetとPieChartから構成されています。

簡単に説明するとPieSetが実際の円グラフで、PieChartはその円グラフを入れる箱のようなものです。

今回はPieSetで使用されるラベルと凡例のカスタマイズ方法をご紹介します。

まず、円グラフの元となるデータを下記の形式で設定します。

let rs:RecordSet = 　{RecordSet
                               {RecordFields
                                   {RecordField
                                       “Event”,
                                       domain = String
                                   },
                                   {RecordField
                                       “Risk”,
                                       domain = double
                                   },
                                   {RecordField
                                       “Number”,
                                       domain = int64
                                   }
                               },
                               {RecordData Event = “むぎ茶”, Risk = 25.0, Number = 250},
                               {RecordData Event = “玄米茶”, Risk = 50., Number = 500},
                               {RecordData Event = “烏龍茶”, Risk = 12.5, Number = 125},
                               {RecordData Event = “緑茶”, Risk = 12.5, Number = 125}
                           　}

次に円グラフとなるPieSetを作成します。少し長いですが、ポイントはコメントで記述してあります。

    let pieset:PieSet = {PieSet
                            rs,
                            “Risk”,
                            ||枠線の色
                            wedge-group =
                                {ShapeGroup
                                    border-color = “white”
                                },
                            ||ラベルに使用するデータ
                            label-data =
                                {ChartDataSeries rs, “Event”},
　　　　　　　　　　　　　　　　||ラベルの作成
                            label-factory = {proc {pie-set:PieSet,
                                                   set-label:#String,
                                                   data-label:#String,
                                                   value-label:#String,
                                                   position:Distance2d,
                                                   data:ChartDataSeries,
                                                   record:Record,
                                                   record-index:int,
                                                   inner-radius:Distance,
                                                   outer-radius:Distance,
                                                   total-radius:Distance,
                                                   start-angle:Angle,
                                                   stop-angle:Angle
                                                  }:Shape　　　||返却の型がShapeなので文字以外でも画像等をラベルに指定することも可能です

                                                let font-col:FillPattern = “#222222” ||まず、基本の文字色を宣言します
                                                {if record[“Risk”] asa double >= 25 then ||Risk項目が25%以上であれば、文字色を赤に設定します
                                                    set font-col = “red”
                                                }

                                                {return
                                                    {TextShape
                                                        font-size = 10pt,
                                                        color = font-col,
                                                        halign = “center”,
                                                        valign = “center”,
                                                        translation = position,　||文字の配置は、この部分で変更できます
                                                        {non-null data-label}
                                                    }
                                                }
                                            },
                            ||凡例の表示
                            legend-enabled? = true,
                            ||凡例の作成
                            legend-entry-factory = {proc {chart:Chart,
                                                           data-series:ChartDataSeries,
                                                           record:#Record,
                                                           color:FillPattern,
                                                           legend-index:int
                                                          }:Graphic
                                                        let font-col:FillPattern = “black”
                                                        {return
                                                            {HBox
                                                                valign = “center”,
                                                                 ||%に連動した棒グラフを作成しています
                                                                {Fill
                                                                    width = (record[“Risk”] asa double * .5pt) + 10pt,
                                                                    height = 8pt,
                                                                    background = color, ||色は円グラフの色と連動しています
                                                                    border-width = 0px
                                                                },
                                                                {Fill width = {make-elastic minimum-size = 20pt}},
                                                                ||%が25%以上のデータに対しては、文字列を赤く変更しています
                                                                {if-non-null record then
                                                                    {if record[“Risk”] asa double >= 25 then
                                                                        set font-col = “red”
                                                                    }
                                                                    {HBox
                                                                        color = font-col,
                                                                        {TextFlowBox
                                                                            width = 50pt,
                                                                            {data-series.field.domain.format
                                                                                record[data-series.field.name]
                                                                            }
                                                                        },
                                                                        {TextFlowBox width = 40pt, record[“Number”] & “件”},
                                                                        {TextFlowBox width = 30pt, {String record[“Risk”]} & “%”}
                                                                    }
                                                                 else
                                                                    data-series.field.caption
                                                                }
                                                            }
                                                        }
                                                    }
                        }

最後に円グラフを入れる箱となるPieChartを作成します。

    {let testpiechart:PieChart = {PieChart
                                     width = 15cm,
                                     height = 10cm,
                                     pieset
                                 }
    }

このPieChartを表示するとカスタマイズされた円グラフが表示されます。

ちなみに、カスタマイズしていない凡例とラベルの場合は下記のようになります。

あまり派手な変化ではないですが、このように凡例とラベルの変更は、PieSet作成時に設定することができます。

次の記事では、この円グラフに対してよりインタラクティブな機能を持たせる方法をご紹介します。