エリアチャート
エリアチャートを表示するコンポーネントです。
Tips
プロパティ
UIダイアログ
| 項目 | 入力値 | オプション | デフォルト値 |
|---|---|---|---|
| ID | 文字列 | 自動設定 | |
| 幅 | 文字列 | 750 | |
| 高さ | 文字列 | 250 | |
| X | 文字列 | ||
| Y | 文字列 | ||
| チャートタイプ | 選択 | • 直線 • 曲線 | 直線 |
| 積み上げ | 選択 | • オン • オフ | オフ |
| 表示 | 真偽 | • オン • オフ | オン |
| 値 | 文字列 | ||
| スケール | 表形式 | ||
| 系列 | 表形式 | ||
| 凡例 | 表形式 |
アクション
| 項目 | プロパティ | データ型 | オプション | デフォルト値 |
|---|---|---|---|---|
| ID | id | string | 自動設定 | |
| 幅 | width | string | 750 | |
| 高さ | height | string | 250 | |
| X | x | string | ||
| Y | y | string | ||
| チャートタイプ | chartType | string | • area • splineArea | area |
| - | - | |||
| 表示 | visibility | boolean | • true • false | true |
| 値 | value | array of object | ||
| スケール | scale | object | ||
| 系列 | series | array of object | ||
| 凡例 | legend | object |
Tips
例1 値 (value)
チャートデータの値はX軸のプロット毎にデータをオブジェクトとして記述し、チャート全体を配列として表現します。 以下例ではX軸に02～11(month)までのプロットがあり、４シリーズ(companyA～D)のデータを示しています。
[{"month":"02","company A":20,"company B":52,"company C":72,"company D":34},{"month":"03","company A":5,"company B":33,"company C":90,"company D":55},{"month":"04","company A":55,"company B":30,"company C":81,"company D":66},{"month":"05","company A":30,"company B":11,"company C":62,"company D":22},{"month":"06","company A":27,"company B":14,"company C":68,"company D":70},{"month":"07","company A":32,"company B":31,"company C":64,"company D":50},{"month":"08","company A":50,"company B":22,"company C":30,"company D":80},{"month":"09","company A":12,"company B":19,"company C":65,"company D":48},{"month":"10","company A":10,"company B":24,"company C":50,"company D":66},{"month":"11","company A":17,"company B":40,"company C":78,"company D":55}]
例2 スケール (scale)
Y軸の最小値、最大値、ティックおよびラベルの回転角度を設定します。
| X軸 | X軸回転角度 | Y軸最小 | Y軸最大 | Y軸刻み | Y軸回転角度 |
|---|---|---|---|---|---|
| month | 0 | 0 | 100 | 10 | 0 |
Tips
例3 系列 (series)
シリーズの描画設定をします。
| ID | 値 | 色 | 線幅 |
|---|---|---|---|
| A | company A | #81C4E8 | 3 |
| B | company B | #74A2E7 | 3 |
| C | company C | #5E83BA | 3 |
例4 凡例 (legend)
凡例情報を設定します。
| 系列 | 水平位置 | 垂直位置 |
|---|---|---|
| A,B,C | right | top |
- 水平位置の選択肢は left | center | right (default) です。
- 垂直位置の選択肢は top (default) | bottom です。
イベント
なし