@operato/scene-chartjs 7.0.8 → 7.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +19 -0
- package/dist/config-converter.js +6 -1
- package/dist/config-converter.js.map +1 -1
- package/dist/ox-chart.js +14 -0
- package/dist/ox-chart.js.map +1 -1
- package/helps/scene/component/chartjs.ja.md +364 -0
- package/helps/scene/component/chartjs.ko.md +211 -183
- package/helps/scene/component/chartjs.md +269 -242
- package/helps/scene/component/chartjs.ms.md +365 -0
- package/helps/scene/component/chartjs.zh.md +243 -212
- package/package.json +2 -2
- package/schema.graphql +175 -40
- package/src/config-converter.ts +8 -1
- package/src/ox-chart.ts +14 -0
- package/src/scene-chart.d.ts +2 -54
- package/translations/en.json +4 -1
- package/translations/ja.json +4 -1
- package/translations/ko.json +4 -1
- package/translations/ms.json +4 -1
- package/translations/zh.json +4 -1
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -4,330 +4,357 @@
|
|
|
4
4
|
|
|
5
5
|
### 1.1. Common Properties
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
- Theme - Change the chart's theme. Supports 'light' and 'dark'
|
|
8
|
+
- Legend - Display the chart's legend.
|
|
9
|
+
- Position - Can be positioned in four directions: top, bottom, left, right.
|
|
10
|
+
- Dual-axis - Option to express the Y-axis as two axes (left and right). When selected, the secondary Y-axis and its options are displayed.
|
|
11
11
|
|
|
12
|
-
### 1.2. X
|
|
12
|
+
### 1.2. X-axis
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
- Data Reference - Field name of the data to be represented on the chart. Enter the field name to be displayed on the X-axis. For example, 'Date' for the data below.
|
|
15
15
|
![Chart-bar-theme][chart-bar-01]
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
![X
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
### 1.3. Y
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
![Y
|
|
31
|
-
|
|
16
|
+
- Title - Enter the desired title (label) for the X-axis
|
|
17
|
+
- Grid Line - Option to display vertical grid lines
|
|
18
|
+
![X-axis Grid][chart-bar-08]
|
|
19
|
+
- Tick Marks - Option to display tick marks on the X-axis
|
|
20
|
+
|
|
21
|
+
### 1.3. Y-axis
|
|
22
|
+
|
|
23
|
+
- Title - Enter the desired title (label) for the Y-axis
|
|
24
|
+
- Auto Min Value - Automatically select the minimum value and step for tick calculations
|
|
25
|
+
- Min Value - Set the minimum tick value when auto is disabled.
|
|
26
|
+
- Auto Max Value - Automatically select the maximum value and step for tick calculations
|
|
27
|
+
- Max Value - Set the maximum tick value when auto is disabled.
|
|
28
|
+
- Step - Set the tick interval
|
|
29
|
+
- Grid Line - Option to display horizontal grid lines
|
|
30
|
+
![Y-axis Grid][chart-bar-12]
|
|
31
|
+
- Tick Marks - Option to display tick marks on the Y-axis
|
|
32
32
|
|
|
33
33
|
---
|
|
34
34
|
|
|
35
|
-
## 2. Mix Chart(Vertical
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
35
|
+
## 2. Mix Chart (Vertical Bar/Line Chart)
|
|
36
|
+
|
|
37
|
+
- A chart that mixes data representations in bar and line shapes. **(Mix chart properties are the same as bar and line charts.)**
|
|
38
|
+
- Can represent data as bars, lines, or a mix of both. If there are multiple series (fields), it can be displayed as parallel or stacked bars.
|
|
39
|
+
![chart-mix-type][chart-mix-02]
|
|
39
40
|
|
|
40
41
|
[chart-mix-02]: ../images/chart-mix-02.png
|
|
41
42
|
|
|
42
43
|
### 2.1. Series
|
|
43
|
-
* Multiple series of data can be added by using the button "+".
|
|
44
|
-
* **common**
|
|
45
|
-
* Data Key - Defines the field name of the data to be expressed in Y Axes from the original data referenced by series,
|
|
46
|
-
When displaying the following data, the Data Key of the Series is 'Good' and'Bad'.
|
|
47
|
-
![Data Refer][chart-bar-01]
|
|
48
|
-
* Type - Whether to express the series in a line chart or bar
|
|
49
|
-
* Label - Legend name
|
|
50
|
-
* Color - Specify the color of the series to be displayed on the chart
|
|
51
|
-
* Stack Group - The values of the series included in the same Stack Group are accumulated and expressed in a graph.
|
|
52
|
-
![Stack Group][chart-bar-02]
|
|
53
|
-
* Target Axes - When multi axis is applied, the setting field for the target Axes appears, and the target Axes points to the Axes (Axes scale) referenced by the information of the series.
|
|
54
|
-
![Target Axes][chart-bar-03]
|
|
55
|
-
* Value Prefix - The character to be applied as the Value Prefix of the value when the value is displayed (mouse hover, Display Value setted, etc.) (Ex: data: 100, Value Prefix: $ => Result: $100)
|
|
56
|
-
* Value Suffix - The character to be applied as the Value Suffix of the value when the value is displayed (mouse hover, Display Value setted, etc.) (Ex: data: 100, Value Suffix: circle => Result: 100 won)
|
|
57
|
-
* Display Value - Determines whether to display the data of the series on the screen.
|
|
58
|
-
When Display Value is selected, the following items appear.
|
|
59
|
-
* Font Color - Set the color of the displayed value in the series
|
|
60
|
-
* Size - Set Font Size in Series
|
|
61
|
-
* Position - Set Font Position in Series
|
|
62
|
-
* **When Type is line**
|
|
63
|
-
* Line Tension - Graph using straight line (angled), graph using smooth line (smooth)
|
|
64
|
-
* Border Width - Set the width of the line
|
|
65
|
-
* Point Shape - Point shape of each vertex of the line
|
|
66
|
-
* Point Size - Size of each vertex of the line
|
|
67
|
-
* Fill - The space where the line is drawn is filled in the figure that displays the data by using the color of the common inner definition.
|
|
68
|
-
|
|
69
|
-
### 2.2. X Axes
|
|
70
|
-
|
|
71
|
-
* Same as the content defined in [Common Properties](#1.2.-X Axes)
|
|
72
|
-
* Bar Spacing - Gap between bars, and it affects the size of the bar.
|
|
73
|
-
* Tick Spacing - Gap between the tick marks and affects the size of the bar.
|
|
74
|
-
|
|
75
|
-
### 2.3. Y Axes
|
|
76
|
-
|
|
77
|
-
* Same as the content defined in [Common Properties](#1.3.-Y Axes)
|
|
78
|
-
|
|
79
|
-
### 2.4. Y 2nd Axes(Display on Multi axis is selected)
|
|
80
|
-
|
|
81
|
-
* Same as the content defined in [Common Properties](#1.3.-Y Axes)
|
|
82
44
|
|
|
45
|
+
- Use the "+" button to add multiple series to the data.
|
|
46
|
+
- **Common**
|
|
47
|
+
- Data Reference - Define the field name for the data to be represented on the Y-axis for each series. For example, 'Good' and 'Bad' for the data below.
|
|
48
|
+
![Data Refer][chart-bar-01]
|
|
49
|
+
- Type - Define whether the series is represented as a line or bar chart.
|
|
50
|
+
- Label - Legend name
|
|
51
|
+
- Color - Define the color of the series on the chart
|
|
52
|
+
- Accumulation Group - Accumulate the values of series included in the same group and display them in the graph.
|
|
53
|
+
![Accumulation Group][chart-bar-02]
|
|
54
|
+
- Target Axis - If dual-axis is applied, the target axis setting field appears, indicating the axis (axis ticks) the series references.
|
|
55
|
+
![Target Axis][chart-bar-03]
|
|
56
|
+
- Value Format - You can specify the numeric format of the value when it is displayed.
|
|
57
|
+
- Prefix - Character to be applied as a prefix when displaying values (e.g., data: 100, prefix: $ => result: $100)
|
|
58
|
+
- Suffix - Character to be applied as a suffix when displaying values (e.g., data: 100, suffix: 원 => result: 100원)
|
|
59
|
+
- Value Display - Decide whether to display the series data on the screen.
|
|
60
|
+
When value display is selected, the following items appear.
|
|
61
|
+
- Font Color - Set the series label color
|
|
62
|
+
- Size - Set the series label font size
|
|
63
|
+
- Position - Set the series label position
|
|
64
|
+
- Offset - Set the relative position of the series label
|
|
65
|
+
- Rotation - Set the rotation angle of the series label
|
|
66
|
+
- **For line type**
|
|
67
|
+
- Tension - Use straight (angled) or smooth lines
|
|
68
|
+
- Border Width - Set the line thickness
|
|
69
|
+
- Point Shape - Define the shape of the points at each vertex of the line
|
|
70
|
+
- Point Size - Define the size of the points at each vertex of the line
|
|
71
|
+
- Fill - Fill the space under the line with the common property color
|
|
72
|
+
|
|
73
|
+
### 2.2. X-axis
|
|
74
|
+
|
|
75
|
+
- General - Same as defined in [Common Properties](#1.2.-X-axis)
|
|
76
|
+
- Bar Gap - Gap between bars, affects bar size
|
|
77
|
+
- Tick Gap - Gap between ticks, affects bar size
|
|
78
|
+
|
|
79
|
+
### 2.3. Y-axis
|
|
80
|
+
|
|
81
|
+
- Same as defined in [Common Properties](#1.3.-Y-axis)
|
|
82
|
+
|
|
83
|
+
### 2.4. Secondary Y-axis (Displayed when dual-axis is selected)
|
|
84
|
+
|
|
85
|
+
- Settings are the same as Y-axis settings.
|
|
83
86
|
|
|
84
87
|
[chart-bar-01]: ../images/chart-bar-01.png
|
|
85
|
-
|
|
86
88
|
[chart-bar-02]: ../images/chart-bar-02.png
|
|
87
|
-
|
|
88
89
|
[chart-bar-03]: ../images/chart-bar-03.png
|
|
89
|
-
|
|
90
90
|
[chart-bar-08]: ../images/chart-bar-08.png
|
|
91
|
-
|
|
92
91
|
[chart-bar-12]: ../images/chart-bar-12.png
|
|
93
92
|
|
|
94
|
-
|
|
95
93
|
---
|
|
96
94
|
|
|
97
|
-
## 3. Horizontal
|
|
95
|
+
## 3. Horizontal Bar Chart
|
|
98
96
|
|
|
99
|
-
A chart that
|
|
97
|
+
A chart that represents data in horizontal bar shapes. Can be displayed as parallel or stacked bars if there are multiple fields.
|
|
100
98
|
|
|
101
|
-
### 3.1.
|
|
102
|
-
|
|
103
|
-
* Theme - Change the theme of the chart. Supports'light' and'dark'
|
|
104
|
-
* Legend - Display the legend of the chart.
|
|
105
|
-
* Position - Can be placed in four directions: top, bottom, left, and right.
|
|
106
|
-
* Multi Axis - Whether to express the Y axis as left and right Multi Axis, and when selecting Multi Axis, the Y 2nd axes and Y 2nd axes options are displayed.
|
|
99
|
+
### 3.1. Common Properties
|
|
107
100
|
|
|
108
|
-
|
|
101
|
+
- Theme - Change the chart's theme. Supports 'light' and 'dark'
|
|
102
|
+
- Legend - Display the chart's legend.
|
|
103
|
+
- Position - Can be positioned in four directions: top, bottom, left, right.
|
|
104
|
+
- Dual-axis - Option to express the Y-axis as two axes (left and right). When selected, the secondary Y-axis and its options are displayed.
|
|
109
105
|
|
|
110
|
-
|
|
111
|
-
* **common**
|
|
112
|
-
* Data Key - Defines the field name of the data to be expressed in Y Axes from the original data referenced by series,
|
|
113
|
-
When displaying the following data, the Data Key of the Series is 'Good' and'Bad'.
|
|
114
|
-
![Data Refer][chart-bar-01]
|
|
115
|
-
* Label - Legend name
|
|
116
|
-
* Color - Specify the color of the series to be displayed on the chart
|
|
117
|
-
* Stack Group - The values of the series included in the same Stack Group are accumulated and expressed in a graph.
|
|
118
|
-
![Stack Group][chart-bar-02]
|
|
119
|
-
* Target Axes - When multi axis is applied, the setting field for the target Axes appears, and the target Axes points to the Axes (Axes scale) referenced by the information of the series.
|
|
120
|
-
![Target Axes][chart-bar-03]
|
|
121
|
-
* Value Prefix - The character to be applied as the Value Prefix of the value when the value is displayed (mouse hover, Display Value setted, etc.) (Ex: data: 100, Value Prefix: $ => Result: $100)
|
|
122
|
-
* Value Suffix - The character to be applied as the Value Suffix of the value when the value is displayed (mouse hover, Display Value setted, etc.) (Ex: data: 100, Value Suffix: circle => Result: 100 won)
|
|
123
|
-
* Display Value - Determines whether to display the data of the series on the screen.When Display Value is selected, the following items appear.
|
|
124
|
-
* Font Color - Set the color of the displayed value in the series
|
|
125
|
-
* Size - Set Font Size in Series
|
|
126
|
-
* Position - Set Font Position in Series
|
|
127
|
-
|
|
128
|
-
### 3.3. X Axes
|
|
129
|
-
|
|
130
|
-
* Data Key - The field name of the data to be expressed by the chart. Enter the field name of the data to be expressed in X Axes. When the following data is displayed, it becomes'Date'.
|
|
131
|
-
![Data Refer][chart-horizontal-bar-01]
|
|
132
|
-
* Title - Enter the desired title (Label) in X Axes
|
|
133
|
-
* Grid Line - Whether to display vertical grid lines
|
|
134
|
-
* Display Tick - Whether X Axes Display Tick or not
|
|
135
|
-
|
|
136
|
-
### 3.4. Y Axes
|
|
137
|
-
|
|
138
|
-
* Title - Enter the desired title (Label) in Y Axes
|
|
139
|
-
* Min Auto - When Min Auto is selected, the minimum value and step are automatically applied to calculate the scale
|
|
140
|
-
* Min - Displayed when Min Auto is off, and scale Min can be set.
|
|
141
|
-
* Max Auto - When Max Auto is selected, the maximum value and step are automatically applied and the scale is calculated.
|
|
142
|
-
* Max - Displayed when Max Auto is off, and the scale Max can be set.
|
|
143
|
-
* Step - Set the scale interval
|
|
144
|
-
* Grid Line - Whether to express horizontal grid lines
|
|
145
|
-
* Display Tick - Whether Y Axes Display Tick or not
|
|
106
|
+
### 3.2. Series
|
|
146
107
|
|
|
108
|
+
- Use the "+" button to add multiple series to the data.
|
|
109
|
+
- **Common**
|
|
110
|
+
- Data Reference - Define the field name for the data to be represented on the Y-axis for each series. For example, 'Good' and 'Bad' for the data below.
|
|
111
|
+
- Label - Legend name
|
|
112
|
+
- Color - Define the color of the series on the chart
|
|
113
|
+
- Accumulation Group - Accumulate the values of series included in the same group and display them in the graph.
|
|
114
|
+
- Target Axis - If dual-axis is applied, the target axis setting field appears, indicating the axis (axis ticks) the series references.
|
|
115
|
+
- Value Format - You can specify the numeric format of the value when it is displayed.
|
|
116
|
+
- Prefix - Character to be applied as a prefix when displaying values (e.g., data: 100, prefix: $ => result: $100)
|
|
117
|
+
- Suffix - Character to be applied as a suffix when displaying values (e.g., data: 100, suffix: 원 => result: 100원)
|
|
118
|
+
- Value Display - Decide whether to display the series data on the screen.
|
|
119
|
+
When value display is selected, the following items appear.
|
|
120
|
+
- Font Color - Set the series label color
|
|
121
|
+
- Size - Set the series label font size
|
|
122
|
+
- Position - Set the series label position
|
|
123
|
+
- Offset - Set the relative position of the series label
|
|
124
|
+
- Rotation - Set the rotation angle of the series label
|
|
125
|
+
|
|
126
|
+
### 3.3. X-axis
|
|
127
|
+
|
|
128
|
+
- Data Reference - Field name of the data to be represented on the chart. Enter the field name to be displayed on the X-axis. For example, 'Date' for the data below.
|
|
129
|
+
- Title - Enter the desired title (label) for the X-axis
|
|
130
|
+
- Grid Line - Option to display vertical grid lines
|
|
131
|
+
- Tick Marks - Option to display tick marks on the X-axis
|
|
132
|
+
|
|
133
|
+
### 3.4. Y-axis
|
|
134
|
+
|
|
135
|
+
- Title - Enter the desired title (label) for the Y-axis
|
|
136
|
+
- Auto Min Value - Automatically select the minimum value and step for tick calculations
|
|
137
|
+
- Min Value - Set the minimum tick value when auto is disabled.
|
|
138
|
+
- Auto Max Value - Automatically select the maximum value and step for tick calculations
|
|
139
|
+
- Max Value - Set the maximum tick value when auto is disabled.
|
|
140
|
+
- Step - Set the tick interval
|
|
141
|
+
- Grid Line - Option to display horizontal grid lines
|
|
142
|
+
- Tick Marks - Option to display tick marks on the Y-axis
|
|
147
143
|
|
|
148
144
|
[chart-horizontal-bar-01]: ../images/chart-horizontal-bar-01.png
|
|
149
145
|
|
|
150
146
|
---
|
|
147
|
+
|
|
151
148
|
## 4. Line Chart
|
|
152
149
|
|
|
153
|
-
|
|
150
|
+
A chart that represents data in line shapes. (For overlapping properties, refer to bar charts)
|
|
154
151
|
|
|
155
152
|
### 4.1. Properties
|
|
156
153
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
154
|
+
- Theme - Change the chart's theme. Supports 'light' and 'dark'
|
|
155
|
+
- Legend - Display the chart's legend.
|
|
156
|
+
- Position - Can be positioned in four directions: top, bottom, left, right.
|
|
157
|
+
- Dual-axis - Option to express the Y-axis as two axes (left and right). When selected, the secondary Y-axis and its options are displayed.
|
|
161
158
|
|
|
162
159
|
### 4.2. Series
|
|
163
160
|
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
161
|
+
- Use the "+" button to add multiple series to the data.
|
|
162
|
+
- **Common**
|
|
163
|
+
- Data Reference - Define the field name for the data to be represented on the Y-axis for each series. For example, 'Good' and 'Bad' for the data below.
|
|
164
|
+
![Data Refer][chart-line-01]
|
|
165
|
+
- Tension - Use straight (angled) or smooth lines
|
|
166
|
+
- Border Width - Set the line thickness
|
|
167
|
+
- Label - Legend name
|
|
168
|
+
- Color - Define the color of the series on the chart
|
|
169
|
+
- Point Shape - Define the shape of the points at each vertex of the line
|
|
170
|
+
- Point Size - Define the size of the points at each vertex of the line
|
|
171
|
+
- Accumulation Group - Accumulate the values of series included in the same group and display them in the graph.
|
|
172
|
+
- Fill - Fill the space under the line with the common property color
|
|
173
|
+
- Target Axis - If dual-axis is applied, the target axis setting field appears, indicating the axis (axis ticks) the series references.
|
|
174
|
+
- Prefix - Character to be applied as a prefix when displaying values (e.g., data: 100, prefix: $ => result: $100)
|
|
175
|
+
- Suffix - Character
|
|
176
|
+
|
|
177
|
+
to be applied as a suffix when displaying values (e.g., data: 100, suffix: 원 => result: 100원)
|
|
178
|
+
|
|
179
|
+
- Value Display - Decide whether to display the series data on the screen.
|
|
180
|
+
When value display is selected, the following items appear.
|
|
181
|
+
- Font Color - Set the series label color
|
|
182
|
+
- Size - Set the series label font size
|
|
183
|
+
- Position - Set the series label position
|
|
184
|
+
- Offset - Set the relative position of the series label
|
|
185
|
+
- Rotation - Set the rotation angle of the series label
|
|
186
|
+
|
|
187
|
+
### 4.3. X-axis
|
|
188
|
+
|
|
189
|
+
- Data Reference - Field name of the data to be represented on the chart. Enter the field name to be displayed on the X-axis. For example, 'Date' for the data below.
|
|
190
|
+
- Title - Enter the desired title (label) for the X-axis
|
|
191
|
+
- Grid Line - Option to display vertical grid lines
|
|
192
|
+
- Tick Marks - Option to display tick marks on the X-axis
|
|
193
|
+
|
|
194
|
+
### 4.4. Y-axis
|
|
195
|
+
|
|
196
|
+
- Title - Enter the desired title (label) for the Y-axis
|
|
197
|
+
- Auto Min Value - Automatically select the minimum value and step for tick calculations
|
|
198
|
+
- Min Value - Set the minimum tick value when auto is disabled.
|
|
199
|
+
- Auto Max Value - Automatically select the maximum value and step for tick calculations
|
|
200
|
+
- Max Value - Set the maximum tick value when auto is disabled.
|
|
201
|
+
- Step - Set the tick interval
|
|
202
|
+
- Grid Line - Option to display horizontal grid lines
|
|
203
|
+
- Tick Marks - Option to display tick marks on the Y-axis
|
|
201
204
|
|
|
202
205
|
[chart-line-01]: ../images/chart-line-01.png
|
|
203
206
|
|
|
204
207
|
---
|
|
205
|
-
## 5. Radar chart
|
|
206
208
|
|
|
207
|
-
|
|
208
|
-
|
|
209
|
+
## 5. Radar Chart
|
|
210
|
+
|
|
211
|
+
A chart that represents data in radar shapes, displaying the data of a circular chart with multiple lines.
|
|
212
|
+
|
|
213
|
+
### 5.1. Common Properties
|
|
209
214
|
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
215
|
+
- Theme - Change the chart's theme. Supports 'light' and 'dark'
|
|
216
|
+
- Legend - Display the chart's legend.
|
|
217
|
+
- Position - Can be positioned in four directions: top, bottom, left, right.
|
|
213
218
|
|
|
214
219
|
### 5.2. Series
|
|
215
220
|
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
221
|
+
- Use the "+" button to add multiple series to the data.
|
|
222
|
+
- **Common**
|
|
223
|
+
- Data Reference - Define the field name for the data to be represented on the Y-axis for each series. For example, 'Good' and 'Bad' for the data below.
|
|
224
|
+
![Data Refer][chart-radar-01]
|
|
225
|
+
- Label - Legend name
|
|
226
|
+
- Color - Define the color of the series on the chart
|
|
227
|
+
- Accumulation Group - Accumulate the values of series included in the same group and display them in the graph.
|
|
228
|
+
- Value Format - You can specify the numeric format of the value when it is displayed.
|
|
229
|
+
- Prefix - Character to be applied as a prefix when displaying values (e.g., data: 100, prefix: $ => result: $100)
|
|
230
|
+
- Suffix - Character to be applied as a suffix when displaying values (e.g., data: 100, suffix: 원 => result: 100원)
|
|
231
|
+
- Value Display - Decide whether to display the series data on the screen.
|
|
232
|
+
When value display is selected, the following items appear.
|
|
233
|
+
- Font Color - Set the series label color
|
|
234
|
+
- Size - Set the series label font size
|
|
235
|
+
- Position - Set the series label position
|
|
236
|
+
- Offset - Set the relative position of the series label
|
|
237
|
+
- Rotation - Set the rotation angle of the series label
|
|
238
|
+
|
|
239
|
+
### 5.3. Axis
|
|
240
|
+
|
|
241
|
+
- Data Reference - Define the field name for the data to be represented on the Y-axis for each series. For example, 'line' for the data below.
|
|
232
242
|
![Data Refer][chart-radar-01]
|
|
233
243
|
|
|
234
244
|
[chart-radar-01]: ../images/chart-radar-01.png
|
|
235
245
|
|
|
236
246
|
---
|
|
237
247
|
|
|
238
|
-
## 6. Polar
|
|
248
|
+
## 6. Polar Chart
|
|
239
249
|
|
|
240
|
-
|
|
250
|
+
A chart that represents data in polar coordinate shapes.
|
|
241
251
|
|
|
242
|
-
### 6.1. Common
|
|
252
|
+
### 6.1. Common Properties
|
|
243
253
|
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
254
|
+
- Theme - Change the chart's theme. Supports 'light' and 'dark'
|
|
255
|
+
- Legend - Display the chart's legend.
|
|
256
|
+
- Position - Can be positioned in four directions: top, bottom, left, right.
|
|
247
257
|
|
|
248
258
|
### 6.2. Series
|
|
249
259
|
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
260
|
+
- Use the "+" button to add multiple series to the data.
|
|
261
|
+
- **Common**
|
|
262
|
+
- Data Reference - Define the field name for the data to be represented on the Y-axis for each series. For example, 'Good' for the data below.
|
|
263
|
+
![Data Refer][chart-polar-01]
|
|
264
|
+
- Label - Legend name
|
|
265
|
+
- Color - Define the color of the series on the chart
|
|
266
|
+
- Value Format - You can specify the numeric format of the value when it is displayed.
|
|
267
|
+
- Prefix - Character to be applied as a prefix when displaying values (e.g., data: 100, prefix: $ => result: $100)
|
|
268
|
+
- Suffix - Character to be applied as a suffix when displaying values (e.g., data: 100, suffix: 원 => result: 100원)
|
|
269
|
+
- Value Display - Decide whether to display the series data on the screen.
|
|
270
|
+
When value display is selected, the following items appear.
|
|
271
|
+
- Font Color - Set the series label color
|
|
272
|
+
- Size - Set the series label font size
|
|
273
|
+
- Position - Set the series label position
|
|
274
|
+
- Offset - Set the relative position of the series label
|
|
275
|
+
- Rotation - Set the rotation angle of the series label
|
|
276
|
+
|
|
277
|
+
### 6.3. Axis
|
|
278
|
+
|
|
279
|
+
- Data Reference - Define the field name for the data to be represented on the Y-axis for each series. For example, 'hobby' for the data below.
|
|
265
280
|
![Data Refer][chart-polar-01]
|
|
266
281
|
|
|
267
282
|
[chart-polar-01]: ../images/chart-polar-01.png
|
|
268
283
|
|
|
269
284
|
---
|
|
270
285
|
|
|
271
|
-
## 7. Pie
|
|
286
|
+
## 7. Pie Chart
|
|
272
287
|
|
|
273
|
-
|
|
288
|
+
A chart that represents data in circular shapes.
|
|
274
289
|
|
|
275
|
-
### 7.1. Common
|
|
290
|
+
### 7.1. Common Properties
|
|
276
291
|
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
292
|
+
- Theme - Change the chart's theme. Supports 'light' and 'dark'
|
|
293
|
+
- Legend - Display the chart's legend.
|
|
294
|
+
- Position - Can be positioned in four directions: top, bottom, left, right.
|
|
280
295
|
|
|
281
296
|
### 7.2. Series
|
|
282
297
|
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
+
- Use the "+" button to add multiple series to the data.
|
|
299
|
+
- **Common**
|
|
300
|
+
- Data Reference - Define the field name for the data to be represented on the Y-axis for each series. For example, 'Good' for the data below.
|
|
301
|
+
![Data Refer][chart-pie-01]
|
|
302
|
+
- Label - Legend name
|
|
303
|
+
- Color - Define the color of the series on the chart
|
|
304
|
+
- Value Format - You can specify the numeric format of the value when it is displayed.
|
|
305
|
+
- Prefix - Character to be applied as a prefix when displaying values (e.g., data: 100, prefix: $ => result: $100)
|
|
306
|
+
- Suffix - Character to be applied as a suffix when displaying values (e.g., data: 100, suffix: 원 => result: 100원)
|
|
307
|
+
- Value Display - Decide whether to display the series data on the screen.
|
|
308
|
+
When value display is selected, the following items appear.
|
|
309
|
+
- Font Color - Set the series label color
|
|
310
|
+
- Size - Set the series label font size
|
|
311
|
+
- Position - Set the series label position
|
|
312
|
+
- Offset - Set the relative position of the series label
|
|
313
|
+
- Rotation - Set the rotation angle of the series label
|
|
314
|
+
|
|
315
|
+
### 7.3. Axis
|
|
316
|
+
|
|
317
|
+
- Data Reference - Define the field name for the data to be represented on the Y-axis for each series. For example, 'line' for the data below.
|
|
298
318
|
![Data Refer][chart-pie-01]
|
|
299
319
|
|
|
300
320
|
[chart-pie-01]: ../images/chart-pie-01.png
|
|
301
321
|
|
|
302
322
|
---
|
|
303
323
|
|
|
304
|
-
## 8.
|
|
324
|
+
## 8. Doughnut Chart
|
|
305
325
|
|
|
306
|
-
|
|
326
|
+
![Component-Chart-doughnut][chart-doughnut-01]
|
|
307
327
|
|
|
308
|
-
|
|
328
|
+
A chart that represents data in doughnut shapes.
|
|
309
329
|
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
330
|
+
### 8.1. Common Properties
|
|
331
|
+
|
|
332
|
+
- Theme - Change the chart's theme. Supports 'light' and 'dark'
|
|
333
|
+
- Legend - Display the chart's legend.
|
|
334
|
+
- Position - Can be positioned in four directions: top, bottom, left, right.
|
|
313
335
|
|
|
314
336
|
### 8.2. Series
|
|
315
337
|
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
338
|
+
- Use the "+" button to add multiple series to the data.
|
|
339
|
+
- **Common**
|
|
340
|
+
- Data Reference - Define the field name for the data to be represented on the Y-axis for each series. For example, 'Good' for the data below.
|
|
341
|
+
![Data Refer][chart-doughnut-01]
|
|
342
|
+
- Label - Legend name
|
|
343
|
+
- Color - Define the color of the series on the chart
|
|
344
|
+
- Value Format - You can specify the numeric format of the value when it is displayed.
|
|
345
|
+
- Prefix - Character to be applied as a prefix when displaying values (e.g., data: 100, prefix: $ => result: $100)
|
|
346
|
+
- Suffix - Character to be applied as a suffix when displaying values (e.g., data: 100, suffix: 원 => result: 100원)
|
|
347
|
+
- Value Display - Decide whether to display the series data on the screen.
|
|
348
|
+
When value display is selected, the following items appear.
|
|
349
|
+
- Font Color - Set the series label color
|
|
350
|
+
- Size - Set the series label font size
|
|
351
|
+
- Position - Set the series label position
|
|
352
|
+
- Offset - Set the relative position of the series label
|
|
353
|
+
- Rotation - Set the rotation angle of the series label
|
|
354
|
+
|
|
355
|
+
### 8.3. Axis
|
|
356
|
+
|
|
357
|
+
- Data Reference - Define the field name for the data to be represented on the Y-axis for each series. For example, 'line' for the data below.
|
|
331
358
|
![Data Refer][chart-doughnut-01]
|
|
332
359
|
|
|
333
360
|
[chart-doughnut-01]: ../images/chart-doughnut-01.png
|