ウォーターフォール図ウィジェット (テーマ指定可能)
概要
ウォーターフォール図ウィジェットでは、マッシュアップにレスポンシブウォーターフォール図が表示されます。このウィジェットを使用して、値が初期値に加算されたり初期値から減算されたときの累積変化を視覚化できます。
チャートに 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. 「保存」をクリックし、「マッシュアップを表示」をクリックします。
データがチャートに表示されます。バインドされたインフォテーブル内の各追加列はデータ系列として表示されます。データソースをバインドした後で、プロパティ Label、XAxisLabel、および YAxisLabel を使用してラベルを追加することを検討してください。
そのほかのプロパティを使用してウィジェットを設定することもできます。たとえば、以下のようになります。
• ルーラー線を表示するには、プロパティ ShowXAxisRuler および ShowYAxisRuler を有効にします。
• 値の増減を示す傾向色を表示するには、UseTrendColors プロパティを有効にします。
• 垂直軸または水平軸方向のズームを有効にするには、プロパティ HorizonalZoom および VerticalZoom を有効にします。
使用可能なコンフィギュレーションオプションの詳細については、以下のプロパティテーブルを参照してください。
 | チャートデータをランタイムに自動的に更新するには、自動再表示関数を作成し、チャートデータを返すデータサービスにバインドします。詳細については、自動再表示を参照してください。 |
セカンダリ軸の追加
ShowSecondYAxis プロパティを使用して、チャートにセカンダリ Y 軸を追加できます。以下のイメージは、セカンダリ Y 軸があるウォーターフォール図を示しています。
以下のテーブルに、セカンダリ Y 軸を有効にして設定するときに使用可能なプロパティを示します。
プロパティ名 | 説明 | ベースタイプ | デフォルト値 | バインド可能か(Y/N) | ローカライズ可能か(Y/N) |
|---|---|---|---|---|---|
ShowSecondYAxis | セカンダリ Y 軸をチャートに追加します。 このプロパティを選択した場合、プロパティ SecondYAxisFormat、SecondYAxisLabel、および 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 | 凡例領域を非表示にします。 このプロパティを選択した場合、プロパティ LegendAlignment、LegendFilter、LegendMarkerShapes、LegendMaxWidth、および LegendPosition はプロパティリストに表示されません。 | BOOLEAN | false | Y | N | ||
HideNotes | 注記領域を非表示にします。 このプロパティを選択した場合、プロパティ Notes、NotesAlignment、および 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 | 水平軸にズームインできます。 このプロパティを選択した場合、プロパティ HorizontalRangeZoom、HorizontalSliderZoom、DirectSelectionZoom、および 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 |