円グラフ
最終更新
最終更新
円グラフは、データの割合構成を確認するためによく用いられます。
Dachcombが提供している円グラフコンポ―ネントは、管理画面の用途に合わせて、グラフの表現を変えるための機能を備えています。
円グラフコンポーネントには、以下のプロパティが含まれています。
配置された円グラフコンポーネントをクリックするとプロパティパネルが表示されます。
円グラフオブジェクトの変数名です。円グラフをドラッグ＆ドロップすると、そのオブジェクトが自動的に piegraph1、piegraph2... と名付けられます。
ここで設定した変数名は、構文 {{オブジェクト名.プロパティ}} でオブジェクトを参照するために利用できます。
（例）{{piegraph1.hidden}} で piegraph1の表示状態の真偽値を取得することができます。
トグルスイッチをONにすると、円グラフが非表示になります。
円グラフの描画に用いるデータセットです。ソースデータの初期値は、以下のような配列です。
ソースデータに含まれるオブジェクトの最初のプロパティは、グラフのデータラベルとして扱われます。2つ目以降のプロパティは、円グラフの値として扱われます。
ソースデータの配列から、グラフの描画に用いる最初のインデックス番号を指定します。ここで指定したインデックス番号から、円グラフの描画を開始します。指定しない場合は、デフォルトで1が設定されます。
グラフにプロットする点の最大数を指定します。指定しない場合は、ソースデータに含まれるすべてのデータがグラフに描画されます。
データ種別
描画するデータの型を指定します。Numberのみ指定できます。
小数桁数
描画する小数桁数を数値で指定します。指定した桁数より多くの桁数が入力された場合、値は四捨五入されます。
桁区切り記号表示
トグルスイッチをONにすると、値に桁区切り記号が表示されます。
選択したデータ種別によって、設定できる項目が異なります。
Number
小数桁数
描画する小数桁数を数値で指定します。指定した桁数より多くの桁数が入力された場合、値は四捨五入されます。
桁区切り記号表示
トグルスイッチをONにすると、値に桁区切り記号が表示されます。
Date/Time
Format
表示する日付形式を設定します。
String
Max Length
描画する最大文字数を指定します。指定した文字数を超えた場合は、先頭から指定の文字数までがグラフに描画されます。
トグルスイッチをONにすると、グラフにマウスを載せた際にラベルと値をボックスに表示します。
トグルスイッチをONにすると、描画された円グラフを画像としてダウンロードするボタンが表示されます。
円グラフの表示設定を細かく調整できます
トグルスイッチをONにすると、グラフの扇形の半径の大きさを、値の比率に応じて描画します。
データシリーズごとに、グラフを描画する半径を指定します。
円グラフの扇形の色を指定します。
グラフの扇形の角の丸めのサイズを指定します。
円グラフの扇形を囲む枠線の太さを指定します。
トグルスイッチをONにすると、円グラフのデータラベルを表示します。
以下の項目を設定できます。
データ名
トグルスイッチをONにすると、データラベル名を表示しま
値
トグルスイッチをONにすると、描画しているデータの値を表示します。
パーセンテージ
トグルスイッチをONにすると、データの値が占める割合をパーセンテージで表示します。表示する小数桁数を指定することができます。
整列
ラベル表示の位置を指定できます。対応する扇形の近くに配置する、円グラフの外側に揃えて配置する（ラベルを省略表示）、円グラフの内側に揃えて配置する の3つから選択します。
グラフを表示する高さを数値で指定します。
トグルスイッチをONにすると、円グラフのラベル名とグラフの色を凡例として表示します。
以下の項目で表示を調整できます。
表示位置
凡例を表示する位置を指定できます。上、下、左、右 から選択します。
整列
凡例の行内の表示位置を設定できます。左寄せ、中央揃え、右寄せ の3つから選択できます。
トグルスイッチをONにすると、円グラフのタイトルを表示します。
以下の項目で表示を調整できます。
タイトル
表示するタイトルを入力します。
位置
タイトルを表示する位置を指定できます。上、下から選択します。
整列
タイトルの行内の表示位置を設定できます。左寄せ、中央揃え、右寄せ の3つから選択できます。
利用できるオブジェクトとプロパティは、 で確認できます。
円グラフに描画する値のデータ種別を設定します。データソースのオブジェクトのvalue プロパティが対象となります。をクリックすると、設定パネルが開きます。
円グラフのラベル名のデータ種別を設定します。データソースのオブジェクトのindex プロパティが対象となります。をクリックすると、設定パネルが開きます。
