折り線グラフ
最終更新
折り線グラフは、データの推移を把握する際によく用いられます。
Dachcombが提供している折り線グラフコンポ―ネントは、管理画面の用途に合わせて、グラフの表現を変えるための機能を備えています。
折り線グラフコンポーネントには、以下のプロパティが含まれています。
配置された折り線グラフグラフコンポーネントをクリックするとプロパティパネルが表示されます。
折り線グラフオブジェクトの変数名です。折り線グラフをドラッグ＆ドロップすると、そのオブジェクトが自動的に linegraph1、linegraph2... と名付けられます。
ここで設定した変数名は、構文 {{オブジェクト名.プロパティ}} でオブジェクトを参照するために利用できます。
（例）{{linegraph1.hidden}} で linegraph1の表示状態の真偽値を取得することができます。
利用できるオブジェクトとプロパティは、インスペクターメニュー で確認できます。
トグルスイッチをONにすると、折り線グラフが非表示になります。
折り線グラフの描画に用いるデータセットです。ソースデータの初期値は、以下のような配列です。
ソースデータに含まれるオブジェクトの最初のプロパティは、グラフのデータラベルとして扱われます。2つ目以降のプロパティは、折り線グラフの値として扱われます。
3つ以上のプロパティを持つオブジェクトが渡された場合、各オブジェクトから同じプロパティ番号の値をつなげてグラフを描画します。
ソースデータの配列から、グラフの描画に用いる最初のインデックス番号を指定します。ここで指定したインデックス番号から、折り線グラフの描画を開始します。指定しない場合は、デフォルトで1が設定されます。
開始番号は、1から数えます。JavaScript上では、配列のインデックス番号は0から始まるので、値が1だけずれることに注意してください。
グラフにプロットする点の最大数を指定します。指定しない場合は、ソースデータに含まれるすべてのデータがグラフに描画されます。
データ種別
描画するデータの型を指定します。Numberのみ指定できます。
小数桁数
描画する小数桁数を数値で指定します。指定した桁数より多くの桁数が入力された場合、値は四捨五入されます。
桁区切り記号表示
トグルスイッチをONにすると、値に桁区切り記号が表示されます。
選択したデータ種別によって、設定できる項目が異なります。
Number
小数桁数
描画する小数桁数を数値で指定します。指定した桁数より多くの桁数が入力された場合、値は四捨五入されます。
桁区切り記号表示
トグルスイッチをONにすると、値に桁区切り記号が表示されます。
Date/Time
Format
表示する日付形式を設定します。
String
Max Length
描画する最大文字数を指定します。指定した文字数を超えた場合は、先頭から指定の文字数までがグラフに描画されます。
トグルスイッチをONにすると、グラフにマウスを載せた際にラベルと値をボックスに表示します。
トグルスイッチをONにすると、描画された折り線グラフを画像としてダウンロードするボタンが表示されます。
折り線グラフの表示設定を細かく調整できます。
「X軸定義」ボタンをクリックすると、設定パネルが開きます。
以下の項目を設定できます。
軸名表示
トグルスイッチをONにすると、X軸の名称を表示します。
データラベル表示
トグルスイッチをONにすると、データラベルを表示します。
データラベルの間隔
データラベル表示をONにしている場合に設定できます。データラベルを表示するプロットの間隔を数値で設定します。0の場合、すべてのプロットにデータラベルを表示します。
軸線表示
トグルスイッチをONにすると、X軸を直線で描画します。
目盛り表示
トグルスイッチをONにすると、X軸に目盛り線を表示します。
ラベルに目盛りを合わせる
目盛り表示をONにしている場合に設定できます。トグルスイッチをONにすると、データラベルの位置に目盛りを表示します。
分割線表示
トグルスイッチをONにすると、X軸の間に等間隔で直線を表示します。
分割線の色
分割線表示をONにしている場合に設定できます。分割線の色を選択できます。
「Y軸定義」ボタンをクリックすると、設定パネルが開きます。
以下の項目を設定できます。
軸名表示
トグルスイッチをONにすると、Y軸の名称を表示します。
データラベル表示
トグルスイッチをONにすると、データラベルを表示します。
軸線表示
トグルスイッチをONにすると、Y軸を直線で描画します。
目盛り表示
トグルスイッチをONにすると、Y軸に目盛り線を表示します。
分割線表示
トグルスイッチをONにすると、Y軸の間に等間隔で直線を表示します。
分割線の色
分割線表示をONにしている場合に設定できます。分割線の色を選択できます。
折り線グラフが展開する方向を指定します。縦方向、横方向から選択します。
折り線グラフの軸線の描画位置を指定します。以下の4つから選択します。
X軸をグラフの下部、Y軸をグラフの左に描画する
X軸をグラフの上部、Y軸をグラフの左に描画する
X軸をグラフの上部、Y軸をグラフの右に描画する
X軸をグラフの下部、Y軸をグラフの右に描画する
トグルスイッチをONにすると、X軸とY軸の増加方向を反転させることができます。
以下の項目を設定できます。
X-データ順序逆転
トグルスイッチをONにすると、X軸の原点を右端に配置し、左方向に値が増加するように表示します。
Y-データ順序逆転
トグルスイッチをONにすると、X軸の原点を上端に配置し、下方向に値が増加するように表示します。
折り線グラフの色とシンボルの形状を、データシリーズごとに設定できます。
プロットされた点上に表示するシンボルのサイズを指定します。
折り線グラフの線の太さを指定します。
折り線グラフの線の描画スタイルを指定します。
トグルスイッチをONにすると、0からプロットされた点までの面積を塗りつぶし表示します。
トグルスイッチをONにすると、グラフの値を表示します。
表示する位置は、プロット点の上、プロット点の下、プロット点の左、プロット点の右から選択します。
グラフを表示する高さを数値で指定します。
トグルスイッチをONにすると、折り線グラフのラベル名とグラフの色を凡例として表示します。
以下の項目で表示を調整できます。
表示位置
凡例を表示する位置を指定できます。上、下、左、右 から選択します。
整列
凡例の行内の表示位置を設定できます。左寄せ、中央揃え、右寄せ の3つから選択できます。
トグルスイッチをONにすると、折り線グラフのタイトルを表示します。
以下の項目で表示を調整できます。
タイトル
表示するタイトルを入力します。
位置
タイトルを表示する位置を指定できます。上、下から選択します。
整列
タイトルの行内の表示位置を設定できます。左寄せ、中央揃え、右寄せ の3つから選択できます。
折り線グラフに描画する値のデータ種別を設定します。データソースのオブジェクトのvalue プロパティが対象となります。をクリックすると、設定パネルが開きます。
折り線グラフのラベル名のデータ種別を設定します。データソースのオブジェクトのindex プロパティが対象となります。をクリックすると、設定パネルが開きます。
