Mashup Builder > ウィジェット > 標準ウィジェット > 棒グラフウィジェット (テーマ指定可能)
棒グラフウィジェット (テーマ指定可能)
ウィジェットをマッシュアップに追加し、ウィジェットの基本的なプロパティを設定する方法については、以下のビデオをご覧ください。新しいタブでビデオを開くには、プレーヤーのタイトルをクリックします。
概要
棒グラフウィジェットでは、マッシュアップ内に棒グラフが表示されます。
棒グラフは単位の量を比較することを目的に設計されており、Y 軸が量を表します。データ系列をグループ化して積み上げることができます。
* 
棒グラフウィジェットは、プラットフォーム内の標準ウィジェットとして、および SDK からインポート可能な Web コンポーネントとして使用できます。
データ形式
グラフのデータ構造を表すフィールド定義を含むインフォテーブルを作成する必要があります。インフォテーブルには、X 軸と Y 軸の値のフィールド定義が含まれている必要があります。データ系列の値のフィールド定義を含む列を追加することによって、複数のデータ系列を追加できます。各インフォテーブル行は、X 軸のカテゴリとそれに対応する Y 軸の値を表します。次のテーブルに、インフォテーブルのデータ形式を示します。
X 軸
Y 軸の値
Y 軸の値 N
フィールド定義
x:{name:'x',baseType:'STRING'}
value1:{name:'value1',baseType:'NUMBER'}
value2:{name:'value2',baseType:'NUMBER'}
使用
グラフの棒 (列) の X 軸の値を定義します。データのベースタイプは STRING でなければなりません。各行が X 軸上にカテゴリとして表示されます。この列に定義されている名前は、XAaxisField ウィジェットプロパティに選択する必要があるオプションです。
カテゴリの Y 軸の値と凡例ラベルを定義します。
追加した各データ系列の Y 軸の値と凡例ラベルを定義します。
ベースタイプ
STRING
NUMBER
NUMBER
行の例
x: 'Apple' - ここで、Apple は X 軸に表示するカテゴリ名
value1: 10 - カテゴリの Y 軸の値
value2: 30 - 2 つ目のデータ系列の Y 軸の値
次のイメージは、y 軸に 4 つのフィールド定義があるインフォテーブルから返されたデータの例を示しています。
間隔ズーム制御オプションでは、ラベルと期間の 2 つのフィールドから成るインフォテーブルを作成する必要があります。2 つのフィールドのデータのベースタイプは STRING でなければなりません。次の図は、返されたデータサービスのデータ形式を示しています。
duration フィールドで使用可能な値と、これらが表す範囲は次のとおりです。
Y - 年
M - 月
W - 週
d - 日
h - 時間
m - 分
s - 秒
ms - ミリ秒
* 
大文字と小文字が区別されます。たとえば、"M" は月を表し、"m" は分を表します。
データソースのバインド
チャートをデータソースにバインドするには、以下の手順を実行します。
1. 「データ」パネルで、そのウィジェットに適したデータ形式のインフォテーブルを返すデータサービスを追加します。
* 
そのサービスがランタイムにイベントによってトリガーされることを確認します。
2. データサービスの All Data プロパティをチャートの Data プロパティにバインドします。
3. チャートを選択し、「プロパティ」パネルで、プロパティ XAxisField を使用して、X 軸に使用するインフォテーブル列を選択します。
デフォルトでは、インフォテーブル内のすべての列がチャートの Y 軸に自動的に表示されます。データ系列を手動で選択するには、以下の操作を行います。
a. プロパティ NumberOfSeries を固定の数値に設定します。
b. プロパティ DataField1..N を使用して、各データ系列のインフォテーブル列を選択します。
4. 「保存」をクリックし、「マッシュアップを表示」をクリックします。
データがチャートに表示されます。バインドされたインフォテーブル内の各追加列はデータ系列として表示されます。データソースをバインドした後で、プロパティ LabelXAxisLabel、および YAxisLabel を使用してラベルを追加することを検討してください。
そのほかのプロパティを使用してウィジェットを設定することもできます。たとえば、以下のようになります。
ルーラー線を表示するには、プロパティ ShowXAxisRuler および ShowYAxisRuler を有効にします。プロパティ YAxisRulerAlignment を使用して、ルーラー線の参照として使用する軸を指定できます。プライマリ軸またはセカンダリ軸上のマークと線を整列できます。デフォルトでは、線はプライマリ軸のマーカーと整列します。
垂直軸または水平軸方向のズームを有効にするには、プロパティ HorizonalZoom および VerticalZoom を有効にします。
チャートに状態フォーマットを適用するには、プロパティ SeriesStyle を使用します。詳細については、例: グラフへの状態フォーマットの適用を参照してください。
使用可能なコンフィギュレーションオプションの詳細については、以下のプロパティテーブルを参照してください。
* 
チャートデータをランタイムに自動的に更新するには、自動再表示関数を作成し、チャートデータを返すデータサービスにバインドします。詳細については、自動再表示を参照してください。
セカンダリ軸の追加
プロパティ SecondYAxis を使用することで、セカンダリ軸を追加して、X 軸上の 1 つのカテゴリに 2 つの異なる測定値を表示できます。セカンダリ軸には 1 つ以上のデータ系列のデータが表示されます。たとえば、縦棒グラフのセカンダリ軸にパーセント値を示すデータ系列をプロットできます。以下の図は、セカンダリ軸がある縦棒グラフを示しています。
プライマリ軸は定量データの大きさを示し、セカンダリ軸はパーセント値を示しています。各 Y 軸には軸の最大値のプロパティがあります。
NumberofSeries を固定の数値に設定した場合、各データ系列のプロパティ DataFieldN および UseSecondAxisSeriesN が表示されます。デフォルトでは、すべてのデータ系列がプライマリ Y 軸に表示されます。セカンダリ Y 軸にデータ系列を表示するには、セカンダリ軸に表示するすべてのデータ系列のプロパティ UseSecondAxisSeriesN を有効にします。
セカンダリ Y 軸をチャートに追加するには、データ値を含む列が 2 つ以上あるインフォテーブルをバインドします。
1. チャートを選択してから、「プロパティ」パネルを開きます。
2. プロパティ SecondYAxis の横にあるチェックボックスをオンにします。セカンダリ軸のその他のプロパティがリストされます。
3. セカンダリ軸のデータを手動で設定するには、以下の手順を実行します。
a. プロパティ NumberOfSeries を特定の値に設定します。
b. プロパティ DataField..N を使用して、チャート上の各データ系列に使用するインフォテーブル列を選択します。
* 
デフォルトでは、すべてのデータがプライマリ軸に表示されます。
c. セカンダリ軸に表示する各データ系列のプロパティ UseSecondAxisSeriesN を有効にします。
4. 「保存」をクリックし、「マッシュアップを表示」をクリックします。
セカンダリ軸が設定され、インフォテーブルのデータが表示されます。セカンダリ軸を追加した後で、プロパティ SecondYAxisLabel を使用してラベルを設定します。プロパティ SecondYAxisMinValue および SecondYAxisMaxValue を使用して、セカンダリ軸のスケールを設定できます。
以下のテーブルに、セカンダリ Y 軸を有効にして設定するときに使用可能なプロパティを示します。
プロパティ名
説明
ベースタイプ
デフォルト値
バインド可能か(Y/N)
ローカライズ可能か(Y/N)
SecondYAxis
セカンダリ Y 軸をチャートに追加します。
BOOLEAN
false
Y
N
SecondYAxisLabel
セカンダリ Y 軸のテキストラベルを指定します。
STRING
セカンダリ Y 軸
Y
Y
SecondYAxisLabelAlignment
セカンダリ Y 軸のラベルを整列します。ラベルの位置を「上」「中間」、または「下」に設定できます。デフォルトでは、ラベルは中間に配置されます。
STRING
中間
いいえ
N
SecondYAxisFormat
セカンダリ Y 軸の値のフォーマットを設定します。このプロパティを使用して、データの表示形式を指定できます。たとえば、小数点以下の表示桁数を設定できます。
STRING
0000.0
Y
N
SecondYAxisMaxValue
セカンダリ Y 軸の値の最大範囲を設定します。デフォルトでは、範囲は自動的に計算され、すべてのデータが表示されます。
NUMBER
該当なし
Y
N
SecondYAxisMinValue
セカンダリ Y 軸の値の最大範囲を設定します。デフォルトでは、ウィジェットのデータに基づいて、範囲が自動的に計算されます。
NUMBER
該当なし
Y
N
UseSecondYAxis1..n
データ系列 n の値をセカンダリ Y 軸上に表示します。このプロパティは、NumberOfSeriesAuto から固定の数値に変更した場合に使用できます。
BOOLEAN
false
N
N
YAxisRulerAlignment
ルーラー線の基準として使用する Y 軸を指定します。プライマリ Y 軸またはセカンダリ Y 軸のデータ値マーカーとルーラー線を整列できます。
STRING
プライマリ Y 軸
Y
N
SecondYAxisSeriesDisplay
チャート上のセカンダリ Y 軸でデータ系列をどのように積み上げるかを制御します。値を積み上げて結合するか、合計値のパーセントとして積み上げるか、値をグループ化できます。デフォルトでは、データ系列はグループ化されます。
STRING
グループ
Y
N
ウィジェットのプロパティ
棒グラフウィジェットのプロパティを以下に示します。
プロパティ名
説明
ベースタイプ
デフォルト値
バインド可能か(Y/N)
ローカライズ可能か(Y/N)
ChartType
チャートのタイプを「棒グラフ」または「縦棒グラフ」に設定します。
STRING
棒グラフ
N
N
CustomClass
ウィジェットの最上位の div に適用するユーザー定義の CSS クラス。
スペースで区切って、複数のクラスを入力できます。
STRING
該当なし
Y
N
Data
チャートのインフォテーブルのデータソース。
INFOTABLE
該当なし
Y
N
DataField1 - DataField24
これらのプロパティは、NumberOfSereis を固定の数値に設定した場合にリストされます。これらのプロパティを使用して、各データ系列に使用するインフォテーブル列を選択できます。
インフォテーブル列
該当なし
N
N
DataLabel1 - DataLabel24
これらのプロパティは、NumberOfSereis を特定の数値に設定した場合にリストされます。これらのプロパティを使用して、凡例内のデータ系列ごとにカスタムラベルを指定できます。詳細については、チャートの凡例のカスタマイズを参照してください。
STRING
該当なし
N
Y
DataSeriesStyle
状態フォーマットのコンフィギュレーションダイアログボックスが開きます。このプロパティは、NumberOfSeries「自動」に設定されている場合に表示されます。状態定義がチャート上のすべての系列に適用されます。
* 
このウィジェットの状態フォーマットは ThingWorx 9.1 以降でのみサポートされています。
状態定義
該当なし
N
N
DataSeriesStyle1 - DataSeriesStyle24
これらのプロパティは、プロパティ NumberOfSereis に設定した数値に基づいてリストされます。これらのプロパティを使用して、チャート上のデータ系列ごとに別々の状態定義を適用できます。
状態定義
該当なし
N
Disabled
マッシュアップ内のウィジェットを無効にします。
ウィジェットはマッシュアップ内に表示されますが、クリックまたは選択はできません。
BOOLEAN
false
Y
N
DirectSelectionZoom
グラフ上で 2 つのデータアイテムを選択することでズームインできます。
このプロパティに使用可能なオプションは、「水平軸」「垂直軸」「両方」「なし」です。
このプロパティは HorizontalZoom を選択した場合にプロパティリストに表示されます。
STRING
なし
Y
N
DragSelectionZoom
表示するデータ範囲を囲むように選択ボックスを描画することで、グラフの特定の部分にズームインできます。
このプロパティに使用可能なオプションは、「水平軸」「垂直軸」「両方」「なし」です。
このプロパティは HorizontalZoom を選択した場合にプロパティリストに表示されます。
STRING
なし
Y
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
ExternalPadding
軸からのパディングを設定します。
パディングは棒の幅の割合で指定します。
NUMBER
25
Y
N
GroupPadding
データ系列のグループ間のパディングを設定します。
パディングは棒の幅の割合で指定します。
NUMBER
25
Y
N
HideLegend
凡例領域を非表示にします。
このプロパティを選択した場合、プロパティ LegendAlignmentLegendFilterLegendMarkerShapesLegendMaxWidth、および LegendPosition はプロパティリストに表示されません。
BOOLEAN
false
Y
N
HideDataTooltips
チャート上のデータポイントにマウスポインタを合わせるか、チャート上のデータポイントを選択すると表示されるツールヒントを非表示にします。
BOOLEAN
false
N
N
HideNotes
注記領域を非表示にします。
このプロパティを選択した場合、プロパティ NotesNotesAlignment、および NotesPosition はプロパティリストに表示されません。
BOOLEAN
false
Y
N
HideValues
グラフ上のすべての値ラベルを非表示にします。
BOOLEAN
false
Y
N
HideXAxis
X 軸を非表示にします。
BOOLEAN
false
Y
N
HideYAxis
Y 軸を非表示にします。
BOOLEAN
false
Y
N
HorizontalAxisMaxHeight
水平軸の最大高さを設定します。
NUMBER
85
Y
N
HorizontalAxisLabelsRotation
水平軸上のラベルの回転角度を設定します。-180 から 180 の範囲の値を入力できます。
NUMBER
自動サイズ調整
N
N
HorizontalZoom
水平軸にズームインできます。
このプロパティを選択した場合、プロパティ HorizontalIntervalControlHorizontalRangeZoomHorizontalSliderZoomDirectSelectionZoom、および DragSelectionZoom がプロパティリストに表示されます。
BOOLEAN
false
Y
N
HorizontalIntervalControl
特定の間隔で水平軸にズームインできる制御を追加します。
使用可能なオプションは「なし」 (デフォルトの選択) と「ドロップダウンリスト」です。
「ドロップダウンリスト」を選択した場合、プロパティ HorizontalIntervalControlLabel および HorizontalIntervalData がプロパティリストに表示されます。
STRING
なし
N
N
HorizontalIntervalControlLabel
水平軸の間隔ズーム制御のテキストラベルを指定します。
STRING
該当なし
Y
Y
HorizontalIntervalData
間隔ズーム制御オプションのデータソース。
水平間隔ドロップダウンリストからエントリを選択すると、選択した期間の値と開始/終了アンカー点に従ってグラフがズームインされます。
INFOTABLE
該当なし
Y
N
HorizontalIntervalAnchorPoint
データセット内の間隔範囲のアンカー位置を選択できます。
「開始」を選択してデータセットの先頭に間隔を配置するか、「終了」を選択して末尾に間隔を配置します。
たとえば、12 カ月のデータセットで 3 カ月の間隔を指定する場合、「開始」を選択して最初の 3 カ月分のデータセットを表示するか、「終了」を選択して最後の 3 カ月分のデータセットを表示できます。
このプロパティはプロパティ ShowHorizontalAnchorPointControl を選択した場合に表示されます。
STRING
開始
Y
N
HorizontalIntervalAnchorPointLabel
水平軸の間隔アンカー点のラベルを指定します。
このプロパティはプロパティ ShowHorizontalAnchorPointControl を選択した場合に表示されます。
STRING
該当なし
Y
Y
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
MultipleDataSources
グラフ系列に複数のデータソースを使用します。これにより、複数のソースからのデータをグラフに表示できます。
BOOLEAN
false
N
N
Notes
グラフの注記領域内に表示するテキストを指定します。文字列を入力するか、ローカライズトークンを選択できます。
STRING
該当なし
Y
Y
NotesAlignment
注記領域内で注記テキストを「左」「右」、または「中央」に整列します。
STRING
N
N
NumberOfReferenceLines
チャートに表示する基準線の数を指定します。最大 24 本の基準線を追加できます。基準線ごとに、追加のプロパティが追加されます。
NUMBER
Y
N
N
ReferecneLineNLabel
基準線のテキストラベルを設定します。
STRING
Y
Y
N
ReferecneLineNValue
基準線の値を設定します。軸のタイプに基づいて数値または日付の値を指定できます。
NUMBER または DATETIME
Y
N
N
ReferenceLineNAxis
基準線に使用する軸を指定します。このプロパティは、数値や日付の値などの連続データを持つ 2 本の軸がチャートに含まれている場合にのみ使用できます。
STRING
N
N
N
ReverseYAxis
Y 軸の値を逆の順序で表示します。
BOOLEAN
false
N
N
RulersInFront
データ値の前にルーラーを表示します。デフォルトでは、ルーラーはデータの後ろに表示されます。
BOOLEAN
false
Y
N
SeriesClicked
データポイントをクリックするとイベントがトリガーされます。
該当なし
該当なし
Y
N
SeriesDisplay
複数のデータ系列をグラフに表示するときの方法を制御します。「積み上げ」または「グループ」を使用して、各系列のデータ値を積み上げるかグループ化することができます。データ系列を合計値に対する割合として表示するには、「100% 積み上げ」を選択します。
STRING
グループ
Y
N
ShowHorizontalAnchorPointControl
水平軸のアンカー値を調整するための制御を追加します。
このプロパティを選択した場合、プロパティ HorizontalIntervalAnchorPoint および HorizontalIntervalAnchorPointLabel がプロパティリストに表示されます。
BOOLEAN
false
Y
N
ShowHideLegend
ランタイムでのチャートの凡例の表示/非表示を切り替える表示/非表示ボタンを追加します。
BOOLEAN
false
N
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
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 軸の棒のコンテンツを表すインフォテーブルフィールド。
プロパティ MultipleDataSources を選択した場合、複数の XAxisField インフォテーブルソースがプロパティリストに表示されます。
INFOTABLE
該当なし
N
N
XAxisLabel
X 軸のテキストラベルを表示します。
STRING
X 軸
Y
Y
XAxisLabelAlignment
X 軸のラベルを「上」「中間」、または「下」に整列します。
STRING
中間
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
これは役に立ちましたか?