バーチャート

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

プロパティ

No	項目	入力値	デフォルト値	アクションプロパティ	タイプ	アクションデフォルト値	説明
1	ID	文字列	自動設定	id	string	自動設定	`[id]`プロパティはアクションで設定はできません。
2	幅	文字列	750	width	string	750	コンポーネントの幅
3	高さ	文字列	250	height	string	250	コンポーネントの高さ
4	X	文字列		x	string		X座標の位置
5	Y	文字列		y	string		Y座標の位置
6	チャートタイプ	選択 1. 縦バー 2. 横バー	縦バー	chartType	string	bar	チャートの表示形式
7	スタック	選択 1. ON 2. OFF	OFF				データのスタック表示設定
8	表示	真偽	ON	visibility	boolean	true	コンポーネントの表示状態
9	値	表形式 `[詳細1]`	`[詳細1]`	value	`[詳細1]`		チャートデータの配列
10	軸スケール	表形式 `[詳細2]`	`[詳細2]`	scale	object	`[詳細2]`	X軸Y軸のスケール設定
11	系列	表形式 `[詳細3]`	`[詳細3]`	series	array of object	`[詳細3]`	データ系列の描画設定
12	凡例	表形式 `[詳細4]`	`[詳細4]`	legend	object	`[詳細4]`	凡例の表示設定

[幅]、[高さ]プロパティ値には下記を入力できます。
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 です。

イベント

なし