Skip to Content

文档更改5.8.2.2 Line Chart

由 liuqing01 于 2025/06/30 11:35 最后修改
从版本 9.1
由yinshi编辑
在2024/10/24 02:37上
修改评论： 该版本没有评论
到版本
由maym编辑
在2025/02/26 08:24上
修改评论： 该版本没有评论

摘要

细节

页面属性
标题
... ... @@ -1,1 +1,1 @@
1 -5.8.2.2 折线图
1 +5.8.2.2 Line Chart
父
... ... @@ -1,1 +1,1 @@
1 -Main.5\. 设计应用.5\.8 报表设计.5\.8\.2 报表设计器.WebHome
1 +Egret Cloud Operation manual.5\. 设计应用.5\.8 报表设计.5\.8\.2 报表设计器.WebHome
文档作者
... ... @@ -1,1 +1,1 @@
1 -XWiki.yinshi
1 +XWiki.maym
内容
... ... @@ -1,12 +1,25 @@
1 -====== 【使用场景】 ======
1 +==== **[Usage Scenario]** ====
2 2  
3 -在折线图中，一般水平轴（X轴）用来表示时间的推移，并且间隔相同；而垂直轴（Y轴）代表不同时刻的数据的大小。如下图展示了随着时间推移，每月销售额的变化。
3 + A line chart is a commonly used type of chart to display changes over time. It connects data points with lines to show the trend of variables, and is suitable for the following scenarios:
4 4  
5 +* (((
6 +**Time trend analysis:**  Line charts are suitable for displaying time series data, such as daily, monthly, or quarterly sales, user visits, or inventory changes, to help users identify long-term trends.
7 +)))
8 +* (((
9 +**Seasonal changes: ** By observing the fluctuations of the line, it is possible to analyze the periodic changes in the data. For example, seasonal fluctuations in sales revenue, changes in user activity during different time periods, etc.
10 +)))
11 +* (((
12 +**Comparison trend: ** Multiple lines can be used to compare the changes in multiple variables. For example, comparing sales trends of different products, or comparing user growth trends in different markets.
13 +)))
14 +* (((
15 +**Abnormal discovery: ** The prominent peaks or valleys in a line chart help identify abnormal situations in the data, such as an abnormal increase in sales or a sudden decrease in user churn in a certain month.
16 +)))
5 5  
18 +==== ====
6 6  
7 -====== 【功能简介】 ======
20 +==== **[Function Introduction]** ====
8 8  
9 -折线图用于显示数据在一个**连续的时间间隔或者时间跨度上的变化**，它的特点是反映事物随时间或有序类别而变化的趋势。
22 +A line chart is used to display the changes in data over a continuous time interval or span, and its characteristic is to reflect the trend of things changing over time or ordered categories.
10 10  
11 11  [[image:1729663152165-172.png]]
12 12  
... ... @@ -53,7 +53,6 @@
53 53  )))
54 54  )))
55 55  
56 -
57 57  ====== 【基本要求】 ======
58 58  
59 59  要实现折线图的效果，基本要求如下 。
... ... @@ -64,13 +64,13 @@
64 64  
65 65  ====== ======
66 66  
67 -====== 【配置步骤】 ======
79 +==== **【配置步骤】** ====
68 68  
69 69  **Step-1 选择图形**
70 70  
71 71  创建报表，选择折线图，如图：
72 72  
73 -[[image:1729663321225-837.png]]
85 +[[image:1737529051357-629.png]]
74 74  
75 75  
76 76  **Step-2 选择图表展示字段**
... ... @@ -77,7 +77,7 @@
77 77  
78 78  将右边数据源列表中的字段拖动放到【横轴】、【纵轴】、【分组】、【参考线】上
79 79  
80 -[[image:1729663922832-959.png]]
92 +[[image:1737528997085-860.png]]
81 81  
82 82  
83 83  Step-3 样式设置
... ... @@ -87,9 +87,8 @@
87 87  [[image:1729663961688-819.png]]
88 88  
89 89  
90 -样式设置
91 91  
92 -样式设置
103 +==== **【样式配置说明】** ====
93 93  
94 94  |(% colspan="1" rowspan="1" style="width:52px" %)(((
95 95  
... ... @@ -100,7 +100,7 @@
100 100  )))|(% colspan="1" rowspan="1" style="width:1272px" %)(((
101 101  用途
102 102  )))
103 -|(% colspan="1" rowspan="25" style="width:52px" %)(((
114 +|(% colspan="1" rowspan="21" style="width:52px" %)(((
104 104  **折线图**
105 105  
106 106  
... ... @@ -211,7 +211,7 @@
211 211  )))|(% colspan="1" rowspan="1" style="width:1272px" %)(((
212 212  开启后，画布中横轴下方，将显示用户配置的横轴的数据源的标题
213 213  
214 -[[image:1729737237381-651.png||height="495" width="909"]]
225 +[[image:1737529012159-610.png]]
215 215  )))
216 216  |(% colspan="1" rowspan="1" style="width:94px" %)(((
217 217  轴标题名称
... ... @@ -235,7 +235,7 @@
235 235  
236 236  [[image:1729737429518-371.png]]
237 237  )))
238 -|(% colspan="1" rowspan="8" style="width:76.9844px" %)(((
249 +|(% colspan="1" rowspan="4" style="width:76.9844px" %)(((
239 239  纵轴
240 240  
241 241  
... ... @@ -244,45 +244,25 @@
244 244  
245 245  
246 246  )))|(% colspan="1" rowspan="1" style="width:1272px" %)(((
247 -默认开启
258 +开启后，画布中纵轴左侧，将显示用户配置的纵轴的（第一个数据源）的标题
248 248  
249 -
260 +（图中：“Y轴标题”是轴标题， “桌子、椅子、窗帘”是图例）
261 +
262 +[[image:1729737694678-922.png]]
250 250  )))
251 251  |(% colspan="1" rowspan="1" style="width:94px" %)(((
252 252  标题内容
253 -)))|(% colspan="1" rowspan="1" style="width:1272px" %)(((
254 -显示轴标题开启后显示，这里没写标题文字的情况下，默认显示横/纵轴上第一个字段的名称
255 -)))
266 +)))|(% colspan="1" rowspan="1" style="width:1272px" %)支持用户自定义想要的轴标题名称文案
256 256  |(% colspan="1" rowspan="1" style="width:94px" %)(((
257 -颜色字号
258 -)))|(% colspan="1" rowspan="1" style="width:1272px" %)(((
259 -默认：黑色，12号字
260 -)))
261 -|(% colspan="1" rowspan="1" style="width:94px" %)(((
262 262  轴标签
263 263  )))|(% colspan="1" rowspan="1" style="width:1272px" %)(((
264 -默认开启
270 +控制Y轴轴标签是否显示的开关
271 +
272 +[[image:1729737826799-987.png||height="434" width="369"]]
265 265  )))
266 266  |(% colspan="1" rowspan="1" style="width:94px" %)(((
267 -（轴标签）自动旋转
268 -)))|(% colspan="1" rowspan="1" style="width:1272px" %)(((
269 -默认勾选
270 -)))
271 -|(% colspan="1" rowspan="1" style="width:94px" %)(((
272 -颜色字号
273 -)))|(% colspan="1" rowspan="1" style="width:1272px" %)(((
274 -默认：黑色，12号字
275 -)))
276 -|(% colspan="1" rowspan="1" style="width:94px" %)(((
277 277  刻度数
278 -)))|(% colspan="1" rowspan="1" style="width:1272px" %)(((
279 -默认值：6， 即：标识Y轴默认有6个刻度
280 -)))
281 -|(% colspan="1" rowspan="1" style="width:94px" %)(((
282 -
283 -)))|(% colspan="1" rowspan="1" style="width:1272px" %)(((
284 -
285 -)))
276 +)))|(% colspan="1" rowspan="1" style="width:1272px" %)支持用户配置的Y轴的刻度数（注意：这里的刻度数是一个预估值，报表引擎在渲染时可能会根据实际情况改变最终呈现的刻度数）
286 286  |(% colspan="1" rowspan="1" style="width:52px" %)(((
287 287  
288 288  )))|(% colspan="1" rowspan="3" style="width:76.9844px" %)(((
... ... @@ -292,21 +292,17 @@
292 292  )))|(% colspan="1" rowspan="1" style="width:94px" %)(((
293 293  显示图例
294 294  )))|(% colspan="1" rowspan="1" style="width:1272px" %)(((
295 -默认开启
286 +默认开启， 关闭后则不显示图例
287 +
288 +[[image:1729737941885-204.png||height="506" width="842"]]
296 296  )))
297 297  |(% colspan="1" rowspan="1" style="width:52px" %)(((
298 298  
299 299  )))|(% colspan="1" rowspan="1" style="width:94px" %)(((
300 300  图例位置
301 -)))|(% colspan="1" rowspan="1" style="width:1272px" %)(((
302 -默认选中：左上角
303 -)))
294 +)))|(% colspan="1" rowspan="1" style="width:1272px" %)图例默认出现在画布的左上角，同时支持用户设置图例在画布中的位置
304 304  |(% colspan="1" rowspan="1" style="width:52px" %)(((
305 305  
306 306  )))|(% colspan="1" rowspan="1" style="width:94px" %)(((
307 307  颜色字号
308 -)))|(% colspan="1" rowspan="1" style="width:1272px" %)(((
309 -默认：黑色，12号字
310 -
311 -（注意：这里指的是图例中文字Label的颜色和字号）
312 -)))
299 +)))|(% colspan="1" rowspan="1" style="width:1272px" %)支持用户根据需要自行调整图例的文字颜色和字体大小
1729737694678-922.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.YufeiLi
大小
... ... @@ -1,0 +1,1 @@
1 +17.0 KB
内容
1729737826799-987.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.YufeiLi
大小
... ... @@ -1,0 +1,1 @@
1 +17.3 KB
内容
1729737941885-204.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.YufeiLi
大小
... ... @@ -1,0 +1,1 @@
1 +40.9 KB
内容
1737528997085-860.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.YufeiLi
大小
... ... @@ -1,0 +1,1 @@
1 +89.4 KB
内容
1737529012159-610.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.YufeiLi
大小
... ... @@ -1,0 +1,1 @@
1 +41.6 KB
内容
1737529051357-629.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.YufeiLi
大小
... ... @@ -1,0 +1,1 @@
1 +86.2 KB
内容