ラインチャート

ラインチャートはデータ同士を線で結んだチャートです。

Tips

プロパティ

UIダイアログ

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

アクション

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

Tips

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

イベント

なし