チャートとは、グラフを表すオブジェクトです。グラフの種類は大きく分けて、X,Y座標を使用して2次元でプロットするグラフと、円グラフの2種類あります。
基本的なグラフの作成方法
以下のようなグラフを作成する簡単なサンプルをご紹介します。
ソースを以下に示します。
{curl 6.0 applet}
{curl-file-attributes character-encoding = “shift-jis”}
{applet manifest = “manifest.mcurl”,
{compiler-directives careful? = true}
} {import * from CURL.GUI.CHARTS}
||データの作成
{let records:RecordSet =
{RecordSet
{RecordFields
{RecordField “name”,caption = “名前“,domain = String },
{RecordField “age” ,caption = “年齢“,domain = int }
},
{RecordData name = “John”, age = 25},
{RecordData name = “Jane”, age = 29},
{RecordData name = “Julie”, age = 12},
{RecordData name = “Josh”, age = 58},
{RecordData name = “Jon”, age = 6},
{RecordData name = “Damian”, age = 30},
{RecordData name = “Nova”, age = 41},
{RecordData name = “Gabriel”, age = 35}
}
}
||表示
{value
{ShapeBox
width = chart.width,
height = chart.height,
chart
}
}
||チャートの作成
{let chart:LayeredChart =
{LayeredChart
width = 15cm,
height = 6cm,
{BarLayer
{ChartDataSeries records, “age”},
x-axis-data = {ChartDataSeries records, “name”},
{DataSeriesColorPair
{ChartDataSeries records, “age”},
FillPattern.orange
}
},
{LineLayer
{ChartDataSeries records, “age”}
},
{ScatterLayer
{ChartDataSeries records, “age”},
{DataSeriesColorPair
{ChartDataSeries records, “age”},
FillPattern.orange
}
}
}
} |
グラフを作成するには、Chartクラスを使用します。
また、グラフのデータはRecordSetに入力してから使用する必要があります。
LayeredChartは、X座標とY座標を使用して2次元でデータをプロットするグラフです。棒グラフや折れ線グラフなどのグラフは、ChartLayerオブジェクトによって実装されます。ChartLayerオブジェクトは、データおよびそのプロット方法を定義するための抽象クラスであるため、実際にはLineLayer,AreaLayer,ScatterLayer,BubbleLayer,BarLayerといったグラフレイヤをLayeredChartに追加することにより実装します。また、1つ以上のChartLayerオブジェクトを用い、より複雑なグラフを作成することもできます。
上記の例では、以下のグラフレイヤを使用して複数のグラフを表しています。
・BarLayer(棒グラフ)
・LineLayer(折れ線グラフ)
・ScatterLayer(散布図)
円グラフの作成方法
次に、以下のような簡単な円グラフを作成するサンプルをご紹介します。
以下はサンプルソースです。
{curl 6.0 applet} {curl-file-attributes character-encoding = “shift-jis”} {applet manifest = “manifest.mcurl”, {compiler-directives careful? = true} } {import * from CURL.GUI.CHARTS} ||データの作成 {let records:RecordSet = {RecordSet {RecordFields {RecordField “name”,caption = “名前“,domain = String}, {RecordField “age” ,caption = “年齢“,domain = int} }, {RecordData name = “John”, age = 25}, {RecordData name = “Jane”, age = 29}, {RecordData name = “Julie”, age = 12}, {RecordData name = “Josh”, age = 58}, {RecordData name = “Jon”, age = 6}, {RecordData name = “Damian”, age = 30}, {RecordData name = “Nova”, age = 41}, {RecordData name = “Gabriel”,age = 35} } } ||グラフ作成 {AntialiasedFrame {PieChart width = 10cm, height = 10cm, {PieSet records, “age”, label-data = {ChartDataSeries records, “name”} } } } |
円グラフはPieChartを使用して作成します。基本的なグラフを作成する際、ChartLayerを用いてLayeredChartを構成したのと同様に、PieChartはPieSetオブジェクトを用いて構成します。また、PieChartに複数のPieSetを追加した場合は、最初のPieSetが中央に、それ以外のPieSetが追加された順に同心円状に配置されたグラフになります。
サンプルではRecordSetにデータを入力していましたが、データベースサーバーからのデータをConnectedRecordSetに入力してグラフ化することもできます。
RecordSetとConnectedRecordSetの使用については、下記をご参照ください。
「Curl開発者ガイド→データの管理と表示」