Charts API
チャートを描画するための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"にするには、以下の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"にするには、以下の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で簡単なチャートを作成する方法について説明しています。