エリアチャート

エリアチャートを表示するコンポーネントです。

プロパティ

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	area	チャートの表示形式
7	スタック	選択 1. ON 2. 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軸に02～11(month)までのプロットがあり、４シリーズ(companyA～D)のデータを示しています。

[
  {"month":"02","company A":20,"company B":52,"company C":72,"company D":34},
  {"month":"03","company A":5,"company B":33,"company C":90,"company D":55},
  {"month":"04","company A":55,"company B":30,"company C":81,"company D":66},
  {"month":"05","company A":30,"company B":11,"company C":62,"company D":22},
  {"month":"06","company A":27,"company B":14,"company C":68,"company D":70},
  {"month":"07","company A":32,"company B":31,"company C":64,"company D":50},
  {"month":"08","company A":50,"company B":22,"company C":30,"company D":80},
  {"month":"09","company A":12,"company B":19,"company C":65,"company D":48},
  {"month":"10","company A":10,"company B":24,"company C":50,"company D":66},
  {"month":"11","company A":17,"company B":40,"company C":78,"company D":55}
]

[詳細2] 軸スケール (scale)

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

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

[詳細3] 系列 (series)

シリーズの描画設定をします。

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

[詳細4] 凡例 (legend)

凡例情報を設定します。

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

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

イベント

なし