Skip to main content

 

 

OutSystemsオンラインヘルプ
10
リファレンス
OutSystems API
Charts API
OutSystems API

 

 
Language:
English|日本語
 
 
 
OutSystems

Charts API

  1. Last updated
  2. 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

このセクションの記事

  1. Back to top
  • Was this article helpful?

Recommended articles

  1. Article type
    Category
    Owner
    TechComm
  2. Tags
    1. support-application_development
    2. support-Front_end_Development