メインコンテンツまでスキップ

SimpleLineChart

SimpleLineChartウィジェットは、数値のリストを折れ線で描いてトレンドを可視化する軽量なラインチャートです。
株価や数値の変化のように、流れを簡単に見せたいときに使います。

定義・役割

SimpleLineChartウィジェットは、データ値のリスト(dataList)を受け取り、各値を点として結ぶ線を描きます。直線または曲線(スプライン)で表現でき、線の下の領域の塗りつぶし、最小・最大地点の強調、登場アニメーションに対応します。

  • カテゴリー: Contents
  • パレット項目名: SimpleLine
  • デフォルトサイズ: 幅300×高さ150
  • データがない編集画面では、SimpleLineChartというラベルの付いたプレースホルダーボックスとして表示されます。

機能

機能説明
線の描画dataListの値を点として結び、線を描きます。lineColorlineWidthで色と太さを決めます。
曲線・直線の切り替えisSplineをオンにすると滑らかな曲線で、オフにすると直線で描きます(曲線は点が4つ以上のときに適用されます)。
領域の塗りつぶしareaColorまたはareaGradientを指定すると、線の下の領域を塗りつぶします。
最小・最大の表示showMinMaxをオンにすると、データの最小・最大地点に点とテキスト(minTextmaxText)を表示します。
登場アニメーションuseAnimationをオンにすると、中央の横線からグラフが広がるアニメーションで表示されます。
範囲・余白の調整minmaxで縦軸の範囲を、topInsetbottomInsetで上下の余白を調整します。

使い方

  1. 左のウィジェットパレットでContentsカテゴリーを開きます。
  2. SimpleLine項目をキャンバスにドラッグ&ドロップします。
  3. 右のプロパティパネルで、dataListに表示する数値を入力します。
  4. 必要に応じてlineColorlineWidthisSplineで線の見た目を調整します。
  5. showMinMaxuseAnimationで強調と登場アニメーションをオンにします。

プロパティ

プロパティ説明デフォルト値値 / タイプ
dataListチャートに描く数値のリスト。各値が線の1点になります。空のリスト数値のリスト
useAnimation登場アニメーションを使うかどうかfalsetrue / false
showMinMax最小・最大地点を強調表示するかどうかfalsetrue / false
minText最小地点に表示するテキスト未設定文字列
minColor最小地点の点・テキストの色未設定(青で表示)カラー
maxText最大地点に表示するテキスト未設定文字列
maxColor最大地点の点・テキストの色未設定(赤で表示)カラー
isSpline曲線(スプライン)で描くかどうかfalsetrue / false
lineWidth線の太さ1.0数値(0.1~10.0)
lineColor線の色#FF0000(赤)カラー
lineGradient線に適用するグラデーション(指定するとlineColorの代わりに使われます)未設定グラデーション
areaColor線の下の領域を塗る色未設定カラー
areaGradient線の下の領域を塗るグラデーション未設定グラデーション
topInset上側の余白(チャートの高さに対する%)未設定数値(0~100)
bottomInset下側の余白(チャートの高さに対する%)未設定数値(0~100)
min縦軸の最小値(未設定の場合はデータの最小値に自動調整)未設定数値
max縦軸の最大値(未設定の場合はデータの最大値に自動調整)未設定数値

注意・ヒント

警告

dataListが空の場合、線は描かれません。編集画面ではSimpleLineChartのプレースホルダーボックスだけが表示されます。

ヒント

minmaxを指定しない場合、データの最小値・最大値を基準に縦軸が自動調整されます。isSplineの曲線は点が4つ以上のときのみ適用され、それより少ない場合は直線で描かれます。

さらに詳しく

ヒント

このウィジェットをスクリプトで制御するWidget Control(Property・Method・Event)の全体は、SimpleLineChart Widget Controlドキュメントで確認できます。