SimpleLineChart
SimpleLineChartウィジェットは、数値のリストを折れ線で描いてトレンドを可視化する軽量なラインチャートです。
株価や数値の変化のように、流れを簡単に見せたいときに使います。
定義・役割
SimpleLineChartウィジェットは、データ値のリスト(dataList)を受け取り、各値を点として結ぶ線を描きます。直線または曲線(スプライン)で表現でき、線の下の領域の塗りつぶし、最小・最大地点の強調、登場アニメーションに対応します。
- カテゴリー: Contents
- パレット項目名:
SimpleLine - デフォルトサイズ: 幅
300×高さ150 - データがない編集画面では、
SimpleLineChartというラベルの付いたプレースホルダーボックスとして表示されます。
機能
| 機能 | 説明 |
|---|---|
| 線の描画 | dataListの値を点として結び、線を描きます。lineColor・lineWidthで色と太さを決めます。 |
| 曲線・直線の切り替え | isSplineをオンにすると滑らかな曲線で、オフにすると直線で描きます(曲線は点が4つ以上のときに適用されます)。 |
| 領域の塗りつぶし | areaColorまたはareaGradientを指定すると、線の下の領域を塗りつぶします。 |
| 最小・最大の表示 | showMinMaxをオンにすると、データの最小・最大地点に点とテキスト(minText・maxText)を表示します。 |
| 登場アニメーション | useAnimationをオンにすると、中央の横線からグラフが広がるアニメーションで表示されます。 |
| 範囲・余白の調整 | min・maxで縦軸の範囲を、topInset・bottomInsetで上下の余白を調整します。 |
使い方
- 左のウィジェットパレットでContentsカテゴリーを開きます。
- SimpleLine項目をキャンバスにドラッグ&ドロップします。
- 右のプロパティパネルで、
dataListに表示する数値を入力します。 - 必要に応じて
lineColor・lineWidth・isSplineで線の見た目を調整します。 showMinMax・useAnimationで強調と登場アニメーションをオンにします。
プロパティ
| プロパティ | 説明 | デフォルト値 | 値 / タイプ |
|---|---|---|---|
dataList | チャートに描く数値のリスト。各値が線の1点になります。 | 空のリスト | 数値のリスト |
useAnimation | 登場アニメーションを使うかどうか | false | true / false |
showMinMax | 最小・最大地点を強調表示するかどうか | false | true / false |
minText | 最小地点に表示するテキスト | 未設定 | 文字列 |
minColor | 最小地点の点・テキストの色 | 未設定(青で表示) | カラー |
maxText | 最大地点に表示するテキスト | 未設定 | 文字列 |
maxColor | 最大地点の点・テキストの色 | 未設定(赤で表示) | カラー |
isSpline | 曲線(スプライン)で描くかどうか | false | true / false |
lineWidth | 線の太さ | 1.0 | 数値(0.1~10.0) |
lineColor | 線の色 | #FF0000(赤) | カラー |
lineGradient | 線に適用するグラデーション(指定するとlineColorの代わりに使われます) | 未設定 | グラデーション |
areaColor | 線の下の領域を塗る色 | 未設定 | カラー |
areaGradient | 線の下の領域を塗るグラデーション | 未設定 | グラデーション |
topInset | 上側の余白(チャートの高さに対する%) | 未設定 | 数値(0~100) |
bottomInset | 下側の余白(チャートの高さに対する%) | 未設定 | 数値(0~100) |
min | 縦軸の最小値(未設定の場合はデータの最小値に自動調整) | 未設定 | 数値 |
max | 縦軸の最大値(未設定の場合はデータの最大値に自動調整) | 未設定 | 数値 |
注意・ヒント
警告
dataListが空の場合、線は描かれません。編集画面ではSimpleLineChartのプレースホルダーボックスだけが表示されます。
ヒント
min・maxを指定しない場合、データの最小値・最大値を基準に縦軸が自動調整されます。isSplineの曲線は点が4つ以上のときのみ適用され、それより少ない場合は直線で描かれます。
さらに詳しく
ヒント
このウィジェットをスクリプトで制御するWidget Control(Property・Method・Event)の全体は、SimpleLineChart Widget Controlドキュメントで確認できます。