Radar Chart
This component displays a Radar Chart.
Property
| No | Item | Input Value | Default Value | Action Property | Type | Action Default Value | Description |
|---|---|---|---|---|---|---|---|
| 1 | ID | String | Auto-generated | id | string | Auto-generated | The [id] property cannot be set by actions. |
| 2 | Width | String | 390 | width | string | 390 | Component width |
| 3 | Height | String | 460 | height | string | 460 | Component height |
| 4 | X | String | x | string | X coordinate position | ||
| 5 | Y | String | y | string | Y coordinate position | ||
| 6 | Visibility | Boolean | ON | visibility | boolean | true | Display state |
| 7 | Value | Table format[Details 1] | [Details 1] | value | array of object | [Details 1] | Chart data |
| 8 | Scale | Table format[Details 2] | [Details 2] | scale | object | [Details 2] | Scale and tick settings |
| 9 | Series | Table format[Details 3] | [Details 3] | series | array of object | [Details 3] | Series drawing settings |
| 10 | Legend | Table format[Details 4] | [Details 4] | legend | object | [Details 4] | Legend settings |
Example 1 Value (value)
[ {"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}]Example 2 Scale (scale)
Sets the scale and tick.
| Value | Max Ticks |
|---|---|
| month | 10 |
Example 3 Series (series)
Set the drawing settings for the series.
| ID | Value | Color | Point Color | Fill | Alpha |
|---|---|---|---|---|---|
| A | company A | #81C4E8 | #81C4E8 | #81C4E8 | 0.3 |
| B | company B | #74A2E7 | #74A2E7 | #74A2E7 | 0.3 |
| C | company C | #5E83BA | #5E83BA | #5E83BA | 0.3 |
Example 4 Legend (legend)
Sets legend information.
| Series | Horizontal Align | Vertical Align |
|---|---|---|
| A,B,C | right | top |
- The options for Horizontal Align are left | center | right (default).
- The options for Vertical Align are top (default) | bottom.
Event
None