Mashup Builder > ウィジェット > 標準ウィジェット > ウォーターフォール図ウィジェット (テーマ指定可能)
ウォーターフォール図ウィジェット (テーマ指定可能)
概要
ウォーターフォール図ウィジェットでは、マッシュアップにレスポンシブウォーターフォール図が表示されます。このウィジェットを使用して、値が初期値に加算されたり初期値から減算されたときの累積変化を視覚化できます。
チャートに 1 つのデータ系列がある場合、各増減を色分けして正または負の変化をハイライトできます。
ウォーターフォール図ウィジェットをワークスペースにドラッグすると、以下のように表示されます。
* 
ウォーターフォール図ウィジェットは、プラットフォーム内の標準ウィジェットとして、および SDK からインポート可能な Web コンポーネントとして使用できます。
ウォーターフォール図では 1 つのデータソースのみがサポートされます。複数のソースのデータを使用する場合、データを 1 つのインフォテーブルにマージしてチャートで使用できます。
データ形式
グラフのデータ構造を表すフィールド定義を含むインフォテーブルを作成する必要があります。インフォテーブルには、X 軸と Y 軸の値のフィールド定義が含まれている必要があります。各インフォテーブル行は、X 軸のカテゴリとそれに対応する Y 軸の値を表します。以下のテーブルに、インフォテーブルのデータ形式の例を示します。
X 軸
Y 軸の値
Y 軸の値 N
Y 軸
Y 軸
フィールド定義
x:{name:'x',baseType:'STRING'}
Value1:{name:'Value1',baseType:'NUMBER'}
Value1:{name:'Value2',baseType:'NUMBER'}
{Selectable: True, baseType: 'BOOLEAN"}
{ShowTotal: False, baseType: 'BOOLEAN'}
使用
グラフの棒 (列) の X 軸の値を定義します。データのベースタイプは STRING でなければなりません。各行が X 軸上にカテゴリとして表示されます。この列に定義されている名前は、XAaxisField ウィジェットプロパティに選択する必要があるオプションです。
カテゴリの Y 軸の値と凡例ラベルを定義します。
追加した各データ系列の Y 軸の値と凡例ラベルを定義します。
* 
これはオプションのフィールドです。
ウォーターフォール図では選択不可能な棒がサポートされています。つまり、チャート内の棒にカーソルを合わせてフォーカスできますが、その棒を選択することはできません。
インフォテーブルデータソースに追加の列 Selectable を作成する必要があります。値や棒は対話型であり、デフォルトでは True に設定されています。この値を False に設定すると、棒が選択不可になります。このフィールドでは大文字と小文字が区別されません。プロパティリストの NonSelectableData プロパティによって、ユーザーがチャート上のデータをクリックして選択できるかどうかを制御します。詳細については、プロパティテーブルを参照してください。
* 
これは単一系列データの場合に適用可能なオプションのフィールドです。
チャートで値の増減を、累計の棒に積み上げた棒または重ねた棒として表示するかどうかを定義します。この値はデフォルトでは False に設定されています。この値を True に設定すると、積み上げた棒または重なった棒が表示されます。
インフォテーブルデータソースに追加の列 ShowTotal を作成する必要があります。このフィールドでは大文字と小文字が区別されません。プロパティリストの ShowTotal プロパティによって、棒を積み上げてまたは重ねて表示するかどうかを制御します。詳細については、プロパティテーブルを参照してください。
ベースタイプ
STRING
NUMBER
NUMBER
BOOLEAN
BOOLEAN
行の例
Game:'Cash In' - ここで、Cash In は X 軸に表示するカテゴリ名
Player1:100 - カテゴリの Y 軸の値
Player2: 100 - 2 つ目のデータ系列の Y 軸の値
例として、以下の複数系列データのイメージを参照してください。
例として、以下の単一系列データのイメージを参照してください。
* 
X 軸の最初と最後の値によって、対応する Y 軸の値が与えられ、チャートにサマリー値として表示されます。
インフォテーブルで Y 軸の値が空の場合、現在の値が通常の累計の棒としてチャートに表示されます。Y の値が "0" の場合、チャートに空の棒が表示されます。
単一系列データ:
以下のイメージは、Y 軸のフィールド定義があるインフォテーブルから返された単一系列データの例を示しています。
以下のイメージは、サンプルの単一系列データをマッシュアップにロードしたときのウォーターフォール図ウィジェットを示しています。UseTrendColors プロパティを使用して設定された傾向色によって、値の増減がハイライトされています。このイメージでは、4 月の棒は累計の棒に積み上げて表示され、5 月の棒は累計の棒に重ねて表示されています。
複数系列データ:
以下のイメージは、Y 軸のフィールド定義があるインフォテーブルから返された複数系列データの例を示しています。
以下のイメージは、サンプルデータをマッシュアップにロードしたときのウォーターフォール図ウィジェットを示しています。
データソースのバインド
チャートをデータソースにバインドするには、以下の手順を実行します。
1. 「データ」パネルで、そのウィジェットに適したデータ形式のインフォテーブルを返すデータサービスを追加します。
* 
そのサービスがランタイムにイベントによってトリガーされることを確認します。
2. データサービスの All Data プロパティをチャートの Data プロパティにバインドします。
3. チャートを選択し、「プロパティ」パネルで、プロパティ XAxisField を使用して、X 軸に使用するインフォテーブル列を選択します。
デフォルトでは、インフォテーブル内のすべての列がチャートの Y 軸に自動的に表示されます。データ系列を手動で選択するには、以下の操作を行います。
a. プロパティ NumberOfSeries を固定の数値に設定します。
b. プロパティ DataField1..N を使用して、各データ系列のインフォテーブル列を選択します。
4. 「保存」をクリックし、「マッシュアップを表示」をクリックします。
データがチャートに表示されます。バインドされたインフォテーブル内の各追加列はデータ系列として表示されます。データソースをバインドした後で、プロパティ LabelXAxisLabel、および YAxisLabel を使用してラベルを追加することを検討してください。
そのほかのプロパティを使用してウィジェットを設定することもできます。たとえば、以下のようになります。
ルーラー線を表示するには、プロパティ ShowXAxisRuler および ShowYAxisRuler を有効にします。
値の増減を示す傾向色を表示するには、UseTrendColors プロパティを有効にします。
垂直軸または水平軸方向のズームを有効にするには、プロパティ HorizonalZoom および VerticalZoom を有効にします。
チャートに状態フォーマットを適用するには、プロパティ DataSeriesStyle を使用します。詳細については、例: グラフへの状態フォーマットの適用を参照してください。
使用可能なコンフィギュレーションオプションの詳細については、以下のプロパティテーブルを参照してください。
* 
チャートデータをランタイムに自動的に更新するには、自動再表示関数を作成し、チャートデータを返すデータサービスにバインドします。詳細については、自動再表示を参照してください。
セカンダリ軸の追加
ShowSecondYAxis プロパティを使用して、チャートにセカンダリ Y 軸を追加できます。以下のイメージは、セカンダリ Y 軸があるウォーターフォール図を示しています。
以下のテーブルに、セカンダリ Y 軸を有効にして設定するときに使用可能なプロパティを示します。
プロパティ名
説明
ベースタイプ
デフォルト値
バインド可能か(Y/N)
ローカライズ可能か(Y/N)
ShowSecondYAxis
セカンダリ Y 軸をチャートに追加します。
このプロパティを選択した場合、プロパティ SecondYAxisFormatSecondYAxisLabel、および SecondYAxisLabelAlignment がリストに表示されます。
BOOLEAN
false
Y
N
SecondYAxisLabel
セカンダリ Y 軸のテキストラベルを指定します。
STRING
セカンダリ Y 軸
Y
Y
SecondYAxisLabelAlignment
セカンダリ Y 軸のラベルを整列します。ラベルの位置を「上」「中間」、または「下」に設定できます。デフォルトでは、ラベルは中間に配置されます。
STRING
中間
N
N
SecondYAxisFormat
セカンダリ Y 軸の値のフォーマットを設定します。このプロパティを使用して、データの表示形式を指定できます。たとえば、小数点以下の表示桁数を設定できます。
STRING
0000.0
Y
N
プロパティテーブル
プロパティ名
説明
ベースタイプ
デフォルト値
バインド可能
ローカライズ可能
SampleSize
チャートに表示するデータポイントの数を設定します。
NUMBER
該当なし
N
N
ShowZoomButtons
水平ズームまたは垂直ズームが有効になっている場合に、チャートツールバーにズームインボタンとズームアウトボタンを表示します。
BOOLEAN
false
N
N
EmptyChartIcon
チャートが空の場合に表示するアイコンを指定します。
メディアエンティティ
not visible
N
N
EmptyChartLabel
チャートが空の場合に表示するテキストを指定します。
STRING
[[ChartStateLabelEmpty]]
N
Y
ErrorStateIcon
チャートが空の場合に表示するアイコンを指定します。
メディアエンティティ
error
N
N
ErrorStateLabel
チャートが空の場合に表示するテキストを指定します。
STRING
N
Y
LoadingIcon
チャートのデータがロード中である場合に表示するアイコンを指定します。
メディアエンティティ
chart loading icon
N
N
NoDataSourceIcon
チャートがデータソースにバインドされていない場合に表示するアイコンを指定します。
メディアエンティティ
bind
N
N
NoDataSourceLabel
チャートがデータソースにバインドされていない場合に表示するテキストを指定します。
STRING
[[ChartStateLabelNoData]]
N
Y
ウォーターフォール図ウィジェットのプロパティを以下に示します。
プロパティ名
説明
ベースタイプ
デフォルト値
バインド可能か(Y/N)
ローカライズ可能か(Y/N)
CustomClass
ウィジェットの最上位の div に適用するユーザー定義の CSS クラス。
スペースで区切って、複数のクラスを入力できます。
STRING
該当なし
Y
N
Data
チャートのインフォテーブルのデータソース。
INFOTABLE
該当なし
Y
N
DataField1 - DataField24
これらのプロパティは、NumberOfSeries を固定の数値に設定した場合にリストされます。これらのプロパティを使用して、各データ系列に使用するインフォテーブル列を選択できます。
インフォテーブル列
該当なし
N
N
DataLabel1 - DataLabel24
これらのプロパティは、NumberOfSeries を固定の数値に設定した場合にリストされます。このプロパティは、凡例領域で各データ系列に表示されるラベルテキストを設定します。
STRING
該当なし
Y
N
DataSeriesStyle
状態フォーマットのコンフィギュレーションダイアログボックスが開きます。このプロパティは、NumberOfSeries「自動」に設定されている場合に表示されます。状態定義がチャート上のすべての系列に適用されます。データ値に基づいて系列のスタイルを設定することで、傾向やパターンをさらに簡単に見つけることができます。
状態定義
該当なし
N
N
DataSeriesStyle1 - DataSereisStyle24
これらのプロパティは、プロパティ NumberOfSeries に設定した数値に基づいてリストされます。これらのプロパティを使用して、チャート上のデータ系列ごとに別々の状態定義を適用できます。
状態定義
該当なし
N
N
Disabled
マッシュアップ内のウィジェットを無効にします。
ウィジェットはマッシュアップ内に表示されますが、クリックまたは選択はできません。
BOOLEAN
false
Y
N
DirectSelectionZoom
グラフ上で 2 つのデータアイテムを選択することでズームインできます。
このプロパティに使用可能なオプションは、「水平軸」「垂直軸」「両方」「なし」です。
このプロパティは HorizontalZoom を選択した場合にプロパティリストに表示されます。
STRING
なし
Y
N
DragSelectionZoom
表示するデータ範囲を囲むように選択ボックスを描画することで、グラフの特定の部分にズームインできます。
このプロパティに使用可能なオプションは、「水平軸」「垂直軸」「両方」「なし」です。
このプロパティは HorizontalZoom を選択した場合にプロパティリストに表示されます。
STRING
なし
Y
N
ExternalPadding
軸からのパディングを設定します。
パディング値は棒の幅の割合で指定します。
NUMBER
25
Y
N
HideConnectorLines
データシーケンス内の各値間の変化をハイライトするコネクタ線を非表示にします。
BOOLEAN
false
Y
N
HideDataTooltips
チャート上のデータポイントにマウスポインタを合わせるか、チャート上のデータポイントを選択すると表示されるツールヒントを非表示にします。
BOOLEAN
false
N
N
HideLegend
凡例領域を非表示にします。
このプロパティを選択した場合、プロパティ LegendAlignmentLegendFilterLegendMarkerShapesLegendMaxWidth、および LegendPosition はプロパティリストに表示されません。
BOOLEAN
false
Y
N
HideNotes
注記領域を非表示にします。
このプロパティを選択した場合、プロパティ NotesNotesAlignment、および NotesPosition はプロパティリストに表示されません。
BOOLEAN
false
Y
N
HideXAxis
X 軸を非表示にします。
BOOLEAN
false
Y
N
HideYAxis
Y 軸を非表示にします。
BOOLEAN
false
Y
N
HorizontalAxisLabelsRotation
水平軸上のラベルの回転角度を設定します。-180 から 180 の範囲の値を入力できます。
NUMBER
自動サイズ調整
N
N
HorizontalAxisMaxHeight
水平軸の最大高さを設定します。
NUMBER
85
Y
N
HorizontalZoom
水平軸にズームインできます。
このプロパティを選択した場合、プロパティ HorizontalRangeZoomHorizontalSliderZoomDirectSelectionZoom、および DragSelectionZoom がプロパティリストに表示されます。
BOOLEAN
false
Y
N
HorizontalRangeZoom
水平軸にズームインする値範囲を指定できる制御を追加します。
このプロパティを選択した場合、以下のプロパティ HorizontalStartZoomLabel および HorizontalEndZoomLabel がプロパティリストに表示されます。
BOOLEAN
false
Y
N
HorizontalRangeZoomDateFormat
範囲選択ズームを使用するときの日付選択ボックス内の日付の形式を設定します。サポートされる形式は Moment.js JavaScript ライブラリに基づいており、大文字と小文字が区別されます。
STRING
該当なし
N
N
HorizontalRangeZoomDateWidth
ズームが有効になったときの、水平軸上の日付選択ボックスの幅を設定します。
NUMBER
332px
N
N
HorizontalStartZoomLabel
範囲選択の開始位置のテキストラベルを指定します。
STRING
該当なし
Y
Y
HorizontalEndZoomLabel
範囲選択の終了位置のテキストラベルを指定します。
STRING
該当なし
Y
Y
HorizontalSliderZoom
水平軸上の最小値と最大値の間のデータを表示可能なスライダーコントロールを追加します。
このプロパティを選択した場合、プロパティ HorizontalSliderZoomMaxLabel および HorizontalSliderZoomMinLabel がプロパティリストに表示されます。
BOOLEAN
false
Y
N
HorizontalSliderZoomMaxLabel
スライダーズームコントロールの最大値のラベルを指定します。
STRING
該当なし
Y
Y
HorizontalSliderZoomMinLabel
スライダーズームコントロールの最小値のラベルを指定します。
STRING
該当なし
Y
Y
InternalPadding
データ系列間のパディングを設定します。
パディングは棒の幅の割合で指定します。
NUMBER
25
Y
N
Label
ウォーターフォール図のラベルテキストを表示します。
STRING
ウォーターフォール図
Y
Y
LabelType
ウォーターフォール図のラベルタイプとして、「大きいヘッダー」「ヘッダー」「サブヘッダー」「大きいタイトル」「タイトル」「ラベル」「本文」、または「キャプション」を選択します。
STRING
サブヘッダー
Y
N
LabelAlignment
ウォーターフォール図ウィジェットのラベルを、「左」「中央」、または「右」に整列します。
STRING
N
N
LabelPosition
ラベルの位置を、「上」または「下」に設定します。
STRING
N
N
LabelReset
ズームコントロールのリセットボタンに表示されるラベルを設定します。
STRING
リセット
Y
Y
LegendAlignment
凡例テキストを、「上」「中間」、または「下」に整列します。
このプロパティで使用できるオプションは、LegendPosition プロパティの設定によって異なります。
STRING
N
N
LegendFilter
ランタイムにユーザーがチャートをフィルタできるように、凡例フィルタを追加します。
BOOLEAN
false
N
N
LegendMarkerShapes
凡例のマーカーシェイプを、「四角形」「円」、または「なし」に設定します。
STRING
四角形
N
N
LegendMaxWidth
凡例領域の最大幅を設定します。
NUMBER
736
Y
N
LegendPosition
凡例の位置を、「上」「下」「左」、または「右」に設定します。
STRING
N
N
NonSelectableData
selectable インフォテーブルフィールドの値 True または False を使用して、ユーザーがチャート上でデータをクリックして選択できるかどうかを制御します。フィールド内の各値が同じ行のすべてのデータ系列に適用されます。
BOOLEAN
false
N
N
Notes
グラフの注記領域内に表示するテキストを指定します。文字列を入力するか、ローカライズトークンを選択できます。
STRING
該当なし
Y
Y
NotesAlignment
注記領域内で注記テキストを「左」「右」、または「中央」に整列します。
STRING
N
N
NotesPosition
注記領域の位置を、「上」または「下」に設定します。
STRING
N
N
NumberOfReferenceLines
チャートに表示する基準線の数を設定します。
基準線は特定の値を基準にしてチャートデータをハイライトするときに使用されます。最大 24 本の線を追加して、各線のラベル、軸、および値を設定できます。
たとえば、このプロパティに 1 から 24 の値を設定すると、対応するプロパティ ReferenceLine1Label - ReferenceLine24Label および ReferenceLine1Value - ReferenceLine24Value がプロパティリストに表示されます。
NUMBER
0
N
N
NumberOfSeries
グラフに表示するデータ系列の数を設定します。
自動設定ではすべてのデータ系列が表示されます。
NUMBER
自動
N
N
NumberOfYLabels
Y 軸に表示するラベルの数を設定します。
NUMBER
自動
N
N
Orientation
チャートの向きを指定します。水平軸または垂直軸上に累積変化を表示できます。
STRING
垂直
N
N
ResetToDefaultValue
このウィジェットの入力をデフォルト値にリセットします。
該当なし
該当なし
Y
N
RulersInFront
データ値の前にルーラーを表示します。デフォルトでは、ルーラーはデータの後ろに表示されます。
BOOLEAN
false
Y
N
SeriesClicked
データポイントをクリックするとイベントがトリガーされます。
該当なし
該当なし
Y
N
SelectedData
チャート上で選択したデータを含むインフォテーブル。
INFOTABLE
該当なし
Y
N
SelectionMode
ユーザーが同時に選択可能なデータポイントの数を制御します。
オプションは「単一」「複数」、および「デフォルト」です。
複数のデータポイントを選択できるようにするには、「複数」を選択します。
STRING
デフォルト
Y
N
ShowHideLegend
ランタイムでのチャートの凡例の表示/非表示を切り替える表示/非表示ボタンを追加します。
BOOLEAN
false
N
N
ShowTotal
ShowTotal インフォテーブルフィールドの値 True または False を使用して、累計を表す横棒または縦棒全体を基準にして傾向値を表示するかどうかを制御します。True に設定した場合、横棒または縦棒を基準に、それぞれの色を使用して、増加は積み上げられ、減少は重ねて表示されます。
BOOLEAN
false
N
N
ShowValues
チャート上に値のラベルを表示します。
このプロパティを選択した場合、プロパティ ValuesPosition がリストに表示されます。
BOOLEAN
false
Y
N
ShowXAxisRuler
X 軸ルーラーを表示します。
BOOLEAN
false
Y
N
ShowYAxisRuler
Y 軸ルーラーを表示します。
BOOLEAN
false
Y
N
ShowZeroValueRuler
ゼロの値のルーラーを表示します。
BOOLEAN
false
Y
N
ShowZoomButtons
水平ズームまたは垂直ズームが有効になっている場合に、チャートツールバーにズームインボタンとズームアウトボタンを表示します。
BOOLEAN
false
N
N
SparkView
グラフを簡略表示します。このプロパティを有効にすると、ラベル、凡例、およびルーラーが非表示になります。
BOOLEAN
false
Y
N
TabSequence
Tab キーを押したときの、ウォーターフォール図ウィジェットのシーケンス番号。
NUMBER
該当なし
N
N
UseTrendColors
チャート内に 1 つの系列からのデータが表示されている場合、異なる色を使用して傾向をハイライトします。
* 
値の増加 (正の傾向) には緑色のスタイルテーマが割り当てられます。減少 (負の傾向) には赤色のスタイルテーマが割り当てられます。
BOOLEAN
false
Y
N
ValuesTooltip
データポイントが選択されたときにカスタムツールヒントを表示できます。
タイトル、テキスト、データ値を表示したり、新しい行を作成したりできます。次の構文を使用します: タイトルを表示するには文字列の前に #title# を追加し、新しい行を作成するには #newline# を追加し、使用可能なチャートトークンのデータを表示するには ${<トークン名>} を追加し、インフォテーブル列の値を表示するには ${Data:<インフォテーブル列>} または ${DataSourceN:<インフォテーブル列>} を追加します。合計を表示するには ${total} トークンを追加し、ステップの合計のみを表示するには #step# でトークンを囲みます。例: #title#ツールヒントタイトル#newline#${label},${total}#newline#${data:Column3}#step#合計${total}#step#。
STRING
WaterfallChartDefaultTooltip
Y
N
ValuesPosition
グラフの棒を基準としたデータ値ラベルの位置を「棒の外側」または「棒の内側」に設定します。
STRING
棒の外側
N
N
VerticalAxisMaxWidth
垂直軸の最大幅を設定します。
NUMBER
85
Y
N
VerticalZoom
垂直軸にズームインできます。
このプロパティを選択した場合、プロパティ VerticalSliderZoom がプロパティリストに表示されます。
BOOLEAN
false
Y
N
VerticalSliderZoom
垂直軸上の最小値と最大値の間のデータを表示可能なスライダーコントロールを追加します。
このプロパティを選択した場合、プロパティ VerticalZoomMaxLabel および VerticalZoomMinLabel がプロパティリストに表示されます。
BOOLEAN
false
Y
N
VerticalZoomMaxLabel
スライダーズームコントロールの最大値のテキストラベルを指定します。
STRING
該当なし
Y
Y
VerticalZoomMinLabel
スライダーズームコントロールの最小値のテキストラベルを指定します。
STRING
該当なし
Y
Y
XAxisField
X 軸のデータを表すインフォテーブルフィールド。
INFOTABLE
該当なし
N
N
XAxisLabel
X 軸のテキストラベルを表示します。
STRING
X 軸
Y
Y
XAxisLabelAlignment
X 軸ラベルを、「左」「中央」、または「右」に整列します。
STRING
Center
N
N
YAxisFormat
Y 軸の値のフォーマットを設定します。
STRING
0000.0
Y
N
YAxisLabel
Y 軸のテキストラベルを表示します。
STRING
Y 軸
Y
Y
YAxisLabelAlignment
Y 軸ラベルを、「上」「中間」、または「下」に整列します。
STRING
中間
N
N
YAxisMaximumValues
Y 軸の値の最大範囲を設定します。
デフォルトでは、範囲はウィジェットデータに基づいて自動的に計算されます。グラフデータにこれより大きい値が含まれている場合、このプロパティの値は無視されます。
STRING
該当なし
Y
N
YAxisMinimumValues
Y 軸の値の最小範囲を設定します。
デフォルトでは、範囲はウィジェットデータに基づいて自動的に計算されます。グラフデータにこれより小さい値が含まれている場合、このプロパティの値は無視されます。
STRING
該当なし
Y
N
YAxisValuesFormat
Y 軸の値ラベルのフォーマットを設定します。
このプロパティは、ShowValues を True に設定した場合に使用できます。
STRING
Y
N
これは役に立ちましたか?