バーチャート

バーチャートはデータをバーで表現したチャートです。

ダイアログプロパティ

項目	入力値	オプション	デフォルト値
ID	文字列		自動設定
幅	文字列		750
高さ	文字列		250
X	文字列
Y	文字列
チャートタイプ	選択	• 縦バー • 横バー	縦バー
スタック	選択	• オン • オフ	オフ
表示	真偽	• オン • オフ	オン
値	文字列
スケール	表形式
系列	表形式
凡例	表形式

アクションプロパティ

項目	プロパティ	データ型	オプション	デフォルト値
ID	id	string		自動設定
幅	width	string		750
高さ	height	string		250
X	x	string
Y	y	string
チャートタイプ	chartType	string	• bar • xbar	bar
表示	visibility	boolean	• true • false	true
値	value	array of object
スケール	scale	object
系列	series	array of object
凡例	legend	object

[幅]、[高さ]プロパティ値には下記を入力できます。
px表示したい場合は数値のみ、%表示したい場合は単位に%を指定してください。
下記以外を入力した場合の動作はサポート外になります。
- 数値
- 数値%
- calc()関数
[X] 、[Y]プロパティ値には下記を入力できます。
px表示したい場合は数値のみを指定してください。
下記以外を入力した場合の動作はサポート外になります。
- 数値
- calc()関数
calc()関数はCSSの関数で、計算を可能にする関数です。（例：calc(100% - 30px)）
calc()関数で使用できる単位は「%」と「px」です。それ以外の単位（例：em,remなど）はサポート外になります。
calc()関数を用いてサイズを指定した際は、エディタ上の表示とアプリ上の見た目が異なることがあります。
プレビューを用いてご確認ください。

例1 値 (value)

チャートデータの値はX軸のプロット毎にデータをオブジェクトとして記述し、チャート全体を配列として表現します。
以下例ではX軸に01～06(month)までのプロットがあり、４シリーズ(companyA～D)のデータを示しています。

[
  {"month":"01","company A":20,"company B":52,"company C":72,"company D":34},
  {"month":"02","company A":5,"company B":33,"company C":90,"company D":55},
  {"month":"03","company A":55,"company B":30,"company C":81,"company D":66},
  {"month":"04","company A":30,"company B":11,"company C":62,"company D":22},
  {"month":"05","company A":27,"company B":14,"company C":68,"company D":70},
  {"month":"06","company A":32,"company B":31,"company C":64,"company D":50}
]

例2 スケール (scale)

軸の最小値、最大値、ティックおよびラベルの回転角度を設定します。

X軸	X軸回転角度	Y軸最小	Y軸最大	Y軸刻み	Y軸回転角度
month	0	0	100	10	0

例3 系列 (series)

系列の描画設定をします。

ID	値	色
A	company A	#81C4E8
B	company B	#74A2E7
C	company C	#5E83BA

例4 凡例 (legend)

凡例情報を設定します。

系列	水平位置	垂直位置
A,B,C	right	top

水平位置の選択肢は left | center | right (default) です。
垂直位置の選択肢は top (default) | bottom です。

イベント

なし