折り線グラフ

折り線グラフは、データの推移を把握する際によく用いられます。

Dachcombが提供している折り線グラフコンポ―ネントは、管理画面の用途に合わせて、グラフの表現を変えるための機能を備えています。

プロパティ

折り線グラフコンポーネントには、以下のプロパティが含まれています。

共通

配置された折り線グラフグラフコンポーネントをクリックするとプロパティパネルが表示されます。

オブジェクト

折り線グラフオブジェクトの変数名です。折り線グラフをドラッグ＆ドロップすると、そのオブジェクトが自動的に linegraph1、linegraph2... と名付けられます。

ここで設定した変数名は、構文 {{オブジェクト名.プロパティ}} でオブジェクトを参照するために利用できます。

（例）{{linegraph1.hidden}} で linegraph1の表示状態の真偽値を取得することができます。

利用できるオブジェクトとプロパティは、インスペクターメニュー で確認できます。

非表示

トグルスイッチをONにすると、折り線グラフが非表示になります。

データ

ソースデータ

折り線グラフの描画に用いるデータセットです。ソースデータの初期値は、以下のような配列です。

[
  {
    "index": 1,
    "value": 10
  },
  {
    "index": 2,
    "value": 20
  },
  {
    "index": 3,
    "value": 30
  },
  {
    "index": 4,
    "value": 40
  }
]

ソースデータに含まれるオブジェクトの最初のプロパティは、グラフのデータラベルとして扱われます。2つ目以降のプロパティは、折り線グラフの値として扱われます。

3つ以上のプロパティを持つオブジェクトが渡された場合、各オブジェクトから同じプロパティ番号の値をつなげてグラフを描画します。

開始番号

ソースデータの配列から、グラフの描画に用いる最初のインデックス番号を指定します。ここで指定したインデックス番号から、折り線グラフの描画を開始します。指定しない場合は、デフォルトで1が設定されます。

開始番号は、1から数えます。JavaScript上では、配列のインデックス番号は0から始まるので、値が1だけずれることに注意してください。

最大数

グラフにプロットする点の最大数を指定します。指定しない場合は、ソースデータに含まれるすべてのデータがグラフに描画されます。

値タイプ

折り線グラフに描画する値のデータ種別を設定します。データソースのオブジェクトのvalue プロパティが対象となります。をクリックすると、設定パネルが開きます。

項目名	設定内容
データ種別	描画するデータの型を指定します。Numberのみ指定できます。
小数桁数	描画する小数桁数を数値で指定します。指定した桁数より多くの桁数が入力された場合、値は四捨五入されます。
桁区切り記号表示	トグルスイッチをONにすると、値に桁区切り記号が表示されます。

ラベルタイプ

折り線グラフのラベル名のデータ種別を設定します。データソースのオブジェクトのindex プロパティが対象となります。をクリックすると、設定パネルが開きます。

選択したデータ種別によって、設定できる項目が異なります。

1. Number

項目名	設定内容
小数桁数	描画する小数桁数を数値で指定します。指定した桁数より多くの桁数が入力された場合、値は四捨五入されます。
桁区切り記号表示	トグルスイッチをONにすると、値に桁区切り記号が表示されます。

1. Date/Time

項目名	設定内容
Format	表示する日付形式を設定します。

1. String

項目名	設定内容
Max Length	描画する最大文字数を指定します。指定した文字数を超えた場合は、先頭から指定の文字数までがグラフに描画されます。

ツールチップ表示

トグルスイッチをONにすると、グラフにマウスを載せた際にラベルと値をボックスに表示します。

ダウンロード表示

トグルスイッチをONにすると、描画された折り線グラフを画像としてダウンロードするボタンが表示されます。

折り線グラフ設定

折り線グラフの表示設定を細かく調整できます。

X軸定義

「X軸定義」ボタンをクリックすると、設定パネルが開きます。

以下の項目を設定できます。

項目名	設定内容
軸名表示	トグルスイッチをONにすると、X軸の名称を表示します。
データラベル表示	トグルスイッチをONにすると、データラベルを表示します。
データラベルの間隔	データラベル表示をONにしている場合に設定できます。データラベルを表示するプロットの間隔を数値で設定します。0の場合、すべてのプロットにデータラベルを表示します。
軸線表示	トグルスイッチをONにすると、X軸を直線で描画します。
目盛り表示	トグルスイッチをONにすると、X軸に目盛り線を表示します。
ラベルに目盛りを合わせる	目盛り表示をONにしている場合に設定できます。トグルスイッチをONにすると、データラベルの位置に目盛りを表示します。
分割線表示	トグルスイッチをONにすると、X軸の間に等間隔で直線を表示します。
分割線の色	分割線表示をONにしている場合に設定できます。分割線の色を選択できます。

Y軸定義

「Y軸定義」ボタンをクリックすると、設定パネルが開きます。

以下の項目を設定できます。

項目名	設定内容
軸名表示	トグルスイッチをONにすると、Y軸の名称を表示します。
データラベル表示	トグルスイッチをONにすると、データラベルを表示します。
軸線表示	トグルスイッチをONにすると、Y軸を直線で描画します。
目盛り表示	トグルスイッチをONにすると、Y軸に目盛り線を表示します。
分割線表示	トグルスイッチをONにすると、Y軸の間に等間隔で直線を表示します。
分割線の色	分割線表示をONにしている場合に設定できます。分割線の色を選択できます。

展開方向

折り線グラフが展開する方向を指定します。縦方向、横方向から選択します。

軸レイアウト

折り線グラフの軸線の描画位置を指定します。以下の4つから選択します。

1. X軸をグラフの下部、Y軸をグラフの左に描画する

2. X軸をグラフの上部、Y軸をグラフの左に描画する

3. X軸をグラフの上部、Y軸をグラフの右に描画する

4. X軸をグラフの下部、Y軸をグラフの右に描画する

データ順序制御

トグルスイッチをONにすると、X軸とY軸の増加方向を反転させることができます。

以下の項目を設定できます。

項目名	設定内容
X-データ順序逆転	トグルスイッチをONにすると、X軸の原点を右端に配置し、左方向に値が増加するように表示します。
Y-データ順序逆転	トグルスイッチをONにすると、X軸の原点を上端に配置し、下方向に値が増加するように表示します。

データカラー

折り線グラフの色とシンボルの形状を、データシリーズごとに設定できます。

シンボルサイズ

プロットされた点上に表示するシンボルのサイズを指定します。

線の太さ

折り線グラフの線の太さを指定します。

線のスタイル

折り線グラフの線の描画スタイルを指定します。

面積表示

トグルスイッチをONにすると、0からプロットされた点までの面積を塗りつぶし表示します。

値表示

トグルスイッチをONにすると、グラフの値を表示します。

表示する位置は、プロット点の上、プロット点の下、プロット点の左、プロット点の右から選択します。

外観

高さ

グラフを表示する高さを数値で指定します。

凡例表示

トグルスイッチをONにすると、折り線グラフのラベル名とグラフの色を凡例として表示します。

以下の項目で表示を調整できます。

項目名	設定内容
表示位置	凡例を表示する位置を指定できます。上、下、左、右 から選択します。
整列	凡例の行内の表示位置を設定できます。左寄せ、中央揃え、右寄せ の3つから選択できます。

タイトル表示

トグルスイッチをONにすると、折り線グラフのタイトルを表示します。

以下の項目で表示を調整できます。

項目名	設定内容
タイトル	表示するタイトルを入力します。
位置	タイトルを表示する位置を指定できます。上、下から選択します。
整列	タイトルの行内の表示位置を設定できます。左寄せ、中央揃え、右寄せ の3つから選択できます。