折り線グラフ

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

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

プロパティ

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

共通

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

オブジェクト

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

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

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

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

非表示

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

データ

ソースデータ

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

json

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

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

INFO

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

開始番号

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

INFO

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

最大数

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

値タイプ

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

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

ラベルタイプ

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

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

Number

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

Date/Time

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

String

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

ツールチップ表示

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

ダウンロード表示

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