Charts API

Last updated
Save as PDF

チャートを描画するためのOutSystems API。

チャートウィジェットを画面にドラッグするとチャートを作成できます。ウィジェットプロパティSourceDataPointListは、DataPoint要素で構成されるリストです。DataPoint要素は、チャートの描画のLabel、Value、DataSeriesName、Tooltip、Colorを定義します。DataPointの値を指定する必要があり、複数のデータ系列があるチャートではチャートに表示する各系列を指定する必要があります。

OutSystemsではHighcharts 4.1.4を使用してチャートを生成します。実装およびAPIの詳細については、Highchartsのドキュメントをご覧ください。

概要

ウィジェット	説明
AreaChart	面グラフは合計に対する値の関係を時系列で示します。
BarChart	横棒グラフは横棒を使用して複数の値を比較します。このチャートではX軸が縦方向に示され、Y軸が横方向に示されます。
ColumnChart	縦棒グラフは縦棒を使用して複数の値を比較します。
LineChart	折れ線グラフは値の推移を時系列で示します。
PieChart	円グラフは値の割合を示します。

アクション	説明
AdvancedFormat_Init	引数として渡された値でAdvancedFormatレコードを初期化します。アクションによってレコードが返されます。
ChartFormat_Init	引数として渡された値でChartFormatレコードを初期化します。アクションによってレコードが返されます。
DataPoint_GetClicked	チャート上でクリックされたデータポイントを返します。チャートのOn Clickアクションでこのアクションを実行します。
DataPoint_Init	引数として渡された値でDataPointレコードを初期化します。アクションによってレコードが返されます。
DataPoint_InitMissing	DataPointを初期化してチャートの欠落部分を描画します。アクションによってレコードが返されます。
XAxisFormat_Init	引数として渡された値でXAxisFormatレコードを初期化します。アクションによってレコードが返されます。
YAxisFormat_Init	引数として渡された値でYAxisFormatレコードを初期化します。アクションによってレコードが返されます。

ストラクチャ	説明
AdvancedDataPointFormat	Highcharts JSONを使用してデータポイントの書式設定をするための情報。
AdvancedDataSeriesFormat	Highcharts JSONを使用してデータ系列の書式設定をするための情報。
AdvancedFormat	Highcharts JSONを使用してチャート要素の書式設定をするための情報。
ChartFormat	チャートの書式設定をするための情報。
DataPoint	チャートにデータポイントを描画するための情報。
XAxisFormat	チャートのX軸の書式設定をするための情報。
YAxisFormat	チャートのY軸の書式設定をするための情報。

静的エンティティ	説明
LegendPosition	チャート上の凡例の表示位置。
StackingType	複数データ系列を面グラフ、横棒グラフ、縦棒グラフで描画する方法。 - NoStacking: データ系列を並べて描画し、比較します。 - Stacked: データ系列を積み重ねて描画し、合計に対する関係を示します。 - Stacked100Percent: データ系列を積み重ねて描画し、合計に対するパーセンテージを示します。
XAxisValuesType	書式設定をするためにX軸上に表示されるラベルのデータ型。「Auto」を使用すると最初のデータポイントのラベルから型が推定されます。

ウィジェット

AreaChart

面グラフは合計に対する値の関係を時系列で示します。

入力

SourceDataPointList: 型: 必須。DataPoint List。
チャートに描画するすべてのデータポイントのリスト。
StackingType: 型: 任意。StackingType Identifier。
チャートに複数のデータ系列の描画する方法。
- NoStacking: データ系列を重ねて描画し、比較します。
- Stacked: データ系列を積み重ねて描画し、合計に対する関係を示します。
- Stacked100Percent: データ系列を積み重ねて描画し、合計に対するパーセンテージを示します。
デフォルトオプションは「Stacked」です。
Height: 型: 任意。Integer。
チャートの縦サイズ（ピクセル単位。デフォルトでは300）。
チャートの横サイズは親の幅です。
LegendPosition: 型: 任意。LegendPosition Identifier。
チャート上の凡例の表示位置（デフォルトでは「Bottom」）。
データポイントの系列名が設定されていない場合、凡例は表示されません。
XAxisFormat: 型: 任意。XAxisFormat。
X軸の書式設定オプション。
このパラメータを作成して初期化するには、XAxisFormat_Initアクションを使用します。
YAxisFormat: 型: 任意。YAxisFormat。
Y軸の書式設定オプション。
このパラメータを作成して初期化するには、YAxisFormat_Initアクションを使用します。
ChartFormat: 型: 任意。ChartFormat。
チャートの書式設定オプション。
このパラメータを作成して初期化するには、ChartFormat_Initアクションを使用します。
Clickable: 型: 任意。Boolean。
描画された値をクリックしてOn Clickアクションを実行できるようにするには、Trueに設定します（デフォルトではFalse）。
AdvancedFormat: 型: 任意。AdvancedFormat。
チャートに表示される要素の書式設定をするHighcharts JSON。
このパラメータを作成して初期化するには、AdvancedOptions_Initアクションを使用します。

BarChart

横棒グラフは横棒を使用して複数の値を比較します。
このチャートではX軸が縦方向に示され、Y軸が横方向に示されます。

入力

SourceDataPointList: 型: 必須。DataPoint List。
チャートに描画するすべてのデータポイントのリスト。
StackingType: 型: 任意。StackingType Identifier。
チャートに複数のデータ系列の描画する方法。
- NoStacking: データ系列を並べて描画し、比較します。
- Stacked: データ系列を積み重ねて描画し、合計に対する関係を示します。
- Stacked100Percent: データ系列を積み重ねて描画し、合計に対するパーセンテージを示します。
デフォルトオプションは「NoStacking」です。
Height: 型: 任意。Integer。
チャートの縦サイズ（ピクセル単位。デフォルトでは300）。
チャートの横サイズは親の幅です。
LegendPosition: 型: 任意。LegendPosition Identifier。
チャート上の凡例の表示位置（デフォルトでは「Bottom」）。
データポイントの系列名が設定されていない場合、凡例は表示されません。
XAxisFormat: 型: 任意。XAxisFormat。
X軸の書式設定オプション。
このパラメータを作成して初期化するには、XAxisFormat_Initアクションを使用します。
YAxisFormat: 型: 任意。YAxisFormat。
Y軸の書式設定オプション。
このパラメータを作成して初期化するには、YAxisFormat_Initアクションを使用します。
ChartFormat: 型: 任意。ChartFormat。
チャートの書式設定オプション。
このパラメータを作成して初期化するには、ChartFormat_Initアクションを使用します。
Clickable: 型: 任意。Boolean。
描画された値をクリックしてOn Clickアクションを実行できるようにするには、Trueに設定します（デフォルトではFalse）。
AdvancedFormat: 型: 任意。AdvancedFormat。
チャートに表示される要素の書式設定をするHighcharts JSON。
このパラメータを作成して初期化するには、AdvancedOptions_Initアクションを使用します。

ColumnChart

縦棒グラフは縦棒を使用して複数の値を比較します。

入力

SourceDataPointList: 型: 必須。DataPoint List。
チャートに描画するすべてのデータポイントのリスト。
StackingType: 型: 任意。StackingType Identifier。
チャートに複数のデータ系列の描画する方法。
- NoStacking: データ系列を並べて描画し、比較します。
- Stacked: データ系列を積み重ねて描画し、合計に対する関係を示します。
- Stacked100Percent: データ系列を積み重ねて描画し、合計に対するパーセンテージを示します。
デフォルトオプションは「NoStacking」です。
Height: 型: 任意。Integer。
チャートの縦サイズ（ピクセル単位。デフォルトでは300）。
チャートの横サイズは親の幅です。
LegendPosition: 型: 任意。LegendPosition Identifier。
チャート上の凡例の表示位置（デフォルトでは「Bottom」）。
データポイントの系列名が設定されていない場合、凡例は表示されません。
XAxisFormat: 型: 任意。XAxisFormat。
X軸の書式設定オプション。
このパラメータを作成して初期化するには、XAxisFormat_Initアクションを使用します。
YAxisFormat: 型: 任意。YAxisFormat。
Y軸の書式設定オプション。
このパラメータを作成して初期化するには、YAxisFormat_Initアクションを使用します。
ChartFormat: 型: 任意。ChartFormat。
チャートの書式設定オプション。
このパラメータを作成して初期化するには、ChartFormat_Initアクションを使用します。
Clickable: 型: 任意。Boolean。
描画された値をクリックしてOn Clickアクションを実行できるようにするには、Trueに設定します（デフォルトではFalse）。
AdvancedFormat: 型: 任意。AdvancedFormat。
チャートに表示される要素の書式設定をするHighcharts JSON。
このパラメータを作成して初期化するには、AdvancedOptions_Initアクションを使用します。

LineChart

折れ線グラフは値の推移を時系列で示します。

入力

SourceDataPointList: 型: 必須。DataPoint List。
チャートに描画するすべてのデータポイントのリスト。
Height: 型: 任意。Integer。
チャートの縦サイズ（ピクセル単位。デフォルトでは300）。
チャートの横サイズは親の幅です。
LegendPosition: 型: 任意。LegendPosition Identifier。
チャート上の凡例の表示位置（デフォルトでは「Bottom」）。
データポイントの系列名が設定されていない場合、凡例は表示されません。
XAxisFormat: 型: 任意。XAxisFormat。
X軸の書式設定オプション。
このパラメータを作成して初期化するには、XAxisFormat_Initアクションを使用します。
YAxisFormat: 型: 任意。YAxisFormat。
Y軸の書式設定オプション。
このパラメータを作成して初期化するには、YAxisFormat_Initアクションを使用します。
ChartFormat: 型: 任意。ChartFormat。
チャートの書式設定オプション。
このパラメータを作成して初期化するには、ChartFormat_Initアクションを使用します。
Clickable: 型: 任意。Boolean。
描画された値をクリックしてOn Clickアクションを実行できるようにするには、Trueに設定します（デフォルトではFalse）。
AdvancedFormat: 型: 任意。AdvancedFormat。
チャートに表示される要素の書式設定をするHighcharts JSON。
このパラメータを作成して初期化するには、AdvancedOptions_Initアクションを使用します。

PieChart

円グラフは値の割合を示します。

入力

SourceDataPointList: 型: 必須。DataPoint List。
チャートに描画するすべてのデータポイントのリスト。
Height: 型: 任意。Integer。
チャートの縦サイズ（ピクセル単位。デフォルトでは300）。
チャートの横サイズは親の幅です。
LegendPosition: 型: 任意。LegendPosition Identifier。
チャート上の凡例の表示位置（デフォルトでは「Bottom」）。
ChartFormat: 型: 任意。ChartFormat。
チャートの書式設定オプション。
このパラメータを作成して初期化するには、ChartFormat_Initアクションを使用します。
Clickable: 型: 任意。Boolean。
描画された値をクリックしてOn Clickアクションを実行できるようにするには、Trueに設定します（デフォルトではFalse）。
AdvancedFormat: 型: 任意。AdvancedFormat。
チャートに表示される要素の書式設定をするHighcharts JSON。
このパラメータを作成して初期化するには、AdvancedOptions_Initアクションを使用します。

アクション

AdvancedFormat_Init

引数として渡された値でAdvancedFormatレコードを初期化します。アクションによってレコードが返されます。

入力

DataPointFormats: 型: 任意。AdvancedDataPointFormat List。
データポイントの高度なJSON形式。
DataSeriesFormats: 型: 任意。AdvancedDataSeriesFormat List。
データ系列の高度なJSON形式。
XAxisJSON: 型: 任意。Text。
X軸の高度なJSON形式。
使用可能なすべてのオプションについては、Highcharts API（http://api.highcharts.com/highcharts#xAxis）をご覧ください。
たとえば、X軸の日付形式を"MMM YYYY&quotにするには、以下のHighcharts JSONを使用します。
"labels:{ formatter: function() { return Highcharts.dateFormat('%b %Y', this.value); } }"
YAxisJSON: 型: 任意。Text。
Y軸の高度なJSON形式。
使用可能なすべてのオプションについては、Highcharts API（http://api.highcharts.com/highcharts#yAxis）をご覧ください。
たとえば、軸の値に小数を使用しないようにするには、以下のHighcharts JSONを使用します。
"allowDecimals: false"
HighchartsJSON: 型: 任意。Text。
チャートのいずれかの要素の高度なJSON形式。
使用可能なすべてのオプションについては、Highcharts API（http://api.highcharts.com/highcharts）をご覧ください。

出力

AdvancedFormat: 型: AdvancedFormat。
初期化されたAdvancedFormatレコード。

ChartFormat_Init

引数として渡された値でChartFormatレコードを初期化します。アクションによってレコードが返されます。

入力

ShowDataPointValues: 型: 任意。Boolean。
データポイントの値を表示するには、Trueに設定します。
UseAnimation: 型: 任意。Boolean。
チャートをアニメーション付きで描画するには、Trueに設定します。

出力

ChartFormat: 型: ChartFormat。
初期化されたChartFormatレコード。

DataPoint_GetClicked

チャート上でクリックされたデータポイントを返します。
チャートのOn Clickアクションでこのアクションを実行します。

出力

DataPoint: 型: DataPoint。
クリックされたデータポイント。

DataPoint_Init

引数として渡された値でDataPointレコードを初期化します。アクションによってレコードが返されます。

入力

Label: 型: 必須。Text。
データポイントのX軸のラベル。
X軸に日付を表示するには、Platform Serverの日付形式を使用します（デフォルトではYYYY-MM-DD）。
Value: 型: 必須。Decimal。
描画される値。
DataSeriesName: 型: 任意。Text。
データポイントが属している系列の名前。
Tooltip: 型: 任意。Text。
データポイントの上にマウスを重ねたときに表示されるカスタムツールチップ。
Color: 型: 任意。Text。
データポイントのカスタム色。

出力

DataPoint: 型: DataPoint。
初期化されたDataPointレコード。

DataPoint_InitMissing

DataPointを初期化してチャートの欠落部分を描画します。アクションによってレコードが返されます。

入力

Label: 型: 必須。Text。
データポイントのX軸のラベル。
X軸に日付を表示するには、Platform Serverの日付形式を使用します（デフォルトではYYYY-MM-DD）。
DataSeriesName: 型: 任意。Text。
データポイントが属している系列の名前。

出力

DataPoint: 型: DataPoint。
初期化されたDataPointレコード。

XAxisFormat_Init

引数として渡された値でXAxisFormatレコードを初期化します。アクションによってレコードが返されます。

入力

Title: 型: 任意。Text。
X軸の横に表示されるテキスト。
LabelsRotation: 型: 任意。Integer。
X軸に表示されるすべてのラベルの回転角度。
MinValue: 型: 任意。Text。
X軸に表示される最小値。
MaxValue: 型: 任意。Text。
X軸に表示される最大値。
ValuesType: 型: 任意。XAxisValuesType Identifier。
書式設定をするためにX軸上に表示されるラベルのデータ型。
「Auto」を使用すると最初のデータポイントのラベルから型が推定されます。

出力

XAxisFormat: 型: XAxisFormat。
初期化されたXAxisFormatレコード。

YAxisFormat_Init

引数として渡された値でYAxisFormatレコードを初期化します。アクションによってレコードが返されます。

入力

Title: 型: 任意。Text。
Y軸の横に表示されるテキスト。
MinValue: 型: 任意。Decimal。
Y軸に表示される最小値。
MaxValue: 型: 任意。Decimal。
Y軸に表示される最大値。
ValuesPrefix: 型: 任意。Text。
Y軸に表示される値の前に付加するテキスト。
ValuesSuffix: 型: 任意。Text。
Y軸に表示される値の後に付加するテキスト。
GridLineStep: 型: 任意。Decimal。
Y軸に表示されるグリッド線の間隔。

出力

YAxisFormat: 型: YAxisFormat。
初期化されたYAxisFormatレコード。

ストラクチャ

AdvancedDataPointFormat

Highcharts JSONを使用してデータポイントの書式設定をするための情報。

アトリビュート

DataPoint: 型: DataPoint。
書式設定をするデータポイント。
DataPointJSON: 型: Text (50)。
データポイントの書式設定をするHighcharts JSON。
使用可能なすべてのオプションについては、Highcharts API（http://api.highcharts.com/highcharts#series）をご覧ください。
たとえば、このポイントでカスタムデータラベルを表示するには、以下のHighcharts JSONを使用します。
"dataLabels: { enabled: true, formatter: function () { return 'top value' } }"

AdvancedDataSeriesFormat

Highcharts JSONを使用してデータ系列の書式設定をするための情報。

アトリビュート

DataSeriesName: 型: Text (50)。
書式設定をするデータ系列の名前。
DataSeriesJSON: 型: Text (50)。
データ系列の書式設定をするHighcharts JSON。
データ系列に属しているすべてのデータポイントがこの書式設定の影響を受けます。
使用可能なすべてのオプションについては、Highcharts API（http://api.highcharts.com/highcharts...Options.series）をご覧ください。
たとえば、折れ線グラフで太線を使用して系列を描画するには、以下のHighcharts JSONを使用します。
"lineWidth: 5"

AdvancedFormat

Highcharts JSONを使用してチャート要素の書式設定をするための情報。

アトリビュート

DataPointFormats: 型: AdvancedDataPointFormat List。
データポイントの書式設定をするHighcharts JSON。
DataSeriesFormats: 型: AdvancedDataSeriesFormat List。
データ系列の書式設定をするHighcharts JSON。
XAxisJSON: 型: Text (50)。
X軸の書式設定をするHighcharts JSON。
使用可能なすべてのオプションについては、Highcharts API（http://api.highcharts.com/highcharts#xAxis）をご覧ください。
たとえば、X軸の日付形式を"MMM YYYY&quotにするには、以下のHighcharts JSONを使用します。
"labels:{ formatter: function() { return Highcharts.dateFormat('%b %Y', this.value); } }"
YAxisJSON: 型: Text (50)。
Y軸の書式設定をするHighcharts JSON。
使用可能なすべてのオプションについては、Highcharts API（http://api.highcharts.com/highcharts#yAxis）をご覧ください。
たとえば、軸の値に小数を使用しないようにするには、以下のHighcharts JSONを使用します。
"allowDecimals: false"
HighchartsJSON: 型: Text (50)。
チャートのいずれかの要素の書式設定をするHighcharts JSON。
使用可能なすべてのオプションについては、Highcharts API（http://api.highcharts.com/highcharts）をご覧ください。

ChartFormat

チャートの書式設定をするための情報。

アトリビュート

ShowDataPointValues: 型: Boolean。
データポイントの値を表示するには、Trueに設定します。
UseAnimation: 型: Boolean。
チャートをアニメーション付きで描画するには、Trueに設定します。

DataPoint

チャートにデータポイントを描画するための情報。

アトリビュート

Label: 型: Text (50)。
データポイントのX軸のラベル。
X軸に日付を表示するには、Platform Serverの日付形式を使用します（デフォルトではYYYY-MM-DD）。
Value: 型: Decimal (37, 0)。
描画される値。
DataSeriesName: 型: Text (50)。
データポイントが属している系列の名前。
Tooltip: 型: Text (50)。
データポイントの上にマウスを重ねたときに表示されるカスタムツールチップ。
Color: 型: Text (50)。
データポイントのカスタム色。
例として、次のいずれかの値を使用してデータポイントの色を赤に設定します。"Red", "#FF0000", "rgb(255,0,0)" or "rgba(255,0,0,1)"

XAxisFormat

チャートのX軸の書式設定をするための情報。

アトリビュート

Title: 型: Text (50)。
X軸の横に表示されるテキスト。
LabelsRotation: 型: Integer。
X軸に表示されるすべてのラベルの反時計回りの回転角度。
MinValue: 型: Text (50)。
X軸に表示される最小値。
MaxValue: 型: Text (50)。
X軸に表示される最大値。
ValuesType: 型: XAxisValuesType Identifier。
書式設定をするためにX軸上に表示されるラベルのデータ型。
「Auto」を使用すると最初のデータポイントのラベルから型が推定されます。

YAxisFormat

チャートのY軸の書式設定をするための情報。

アトリビュート

Title: 型: Text (50)。
Y軸の横に表示されるテキスト。
MinValue: 型: Decimal (37, 0)。
Y軸に表示される最小値。
MaxValue: 型: Decimal (37, 0)。
Y軸に表示される最大値。
ValuesPrefix: 型: Text (50)。
Y軸に表示される値の前に付加するテキスト。
ValuesSuffix: 型: Text (50)。
Y軸に表示される値の後に付加するテキスト。
GridLineStep: 型: Decimal (37, 0)。
Y軸に表示されるグリッド線の間隔。

静的エンティティ

LegendPosition

チャート上の凡例の表示位置。

アトリビュート

Id: 型: Integer。
Order: 型: Integer。
Is_Active: 型: Boolean。

レコード

Bottom
Top
Hidden
Inside
Right
Left

StackingType

面グラフ、横棒グラフ、縦棒グラフに複数のデータ系列を描画する方法。
- NoStacking: データ系列を並べて描画し、比較します。
- Stacked: データ系列を積み重ねて描画し、合計に対する関係を示します。
- Stacked100Percent: データ系列を積み重ねて描画し、合計に対するパーセンテージを示します。

アトリビュート

Id: 型: Integer。
Order: 型: Integer。
Is_Active: 型: Boolean。

レコード

NoStacking
Stacked100Percent
Stacked

XAxisValuesType

書式設定をするためにX軸上に表示されるラベルのデータ型。
「Auto」を使用すると最初のデータポイントのラベルから型が推定されます。

アトリビュート

Id: 型: Integer。
Label: 型: Text (50)。
Order: 型: Integer。

レコード

Text
Auto

このセクションの記事

サンプルチャートを作成する
OutSystemsで簡単なチャートを作成する方法について説明しています。

Training

Documentation