Skip to Content

Wiki源代码5.8.2.2 折线图

由用户 yinshi 在 2024/10/23 05:59 保存的版本 2.1
隐藏最后作者
yinshi 2.1 1 ====== 【使用场景】 ======
yinshi 1.1 2
3 在折线图中，一般水平轴（X轴）用来表示时间的推移，并且间隔相同；而垂直轴（Y轴）代表不同时刻的数据的大小。如下图展示了随着时间推移，每月销售额的变化。
4
5
yinshi 2.1 6 [[image:1729663152165-172.png]]
7
8
yinshi 1.1 9 ====== 功能简介 ======
10
11 折线图用于显示数据在一个**连续的时间间隔或者时间跨度上的变化**，它的特点是反映事物随时间或有序类别而变化的趋势。
12
13 一个折线图的构成包括：
14
15 1. (((
16 **横轴 (X 轴)：**
17
18 1. (((
19 **定义：** 折线图中的横轴是水平方向上的轴线，通常用于表示数据的分类或者时间等连续性变量。
20 )))
21 1. (((
22 **含义：** 横轴通常表示自变量，即数据的分类或者时间序列。在折线图中，横轴上的数值或分类标签决定了折线图中每个数据点的横坐标位置。
23 )))
24 )))
25 1. (((
26 **纵轴 (Y 轴)：**
27
28 1. (((
29 **定义：** 折线图中的纵轴是垂直方向上的轴线，通常用于表示数据的数值或者数量。
30 )))
31 1. (((
32 **含义：** 纵轴通常表示因变量，即与自变量相关联的数值或数量。在折线图中，纵轴上的数值决定了折线图中每个数据点的纵坐标位置。
33 )))
34 )))
35 1. (((
36 **点：**
37
38 1. (((
39 **定义：** 折线图中的点是由数据组成的离散的数据点，代表着某个具体的数据值。
40 )))
41 1. (((
42 **含义：** 每个点代表了横轴和纵轴上特定位置的数据值。在折线图中，连接所有点的折线可以展现数据的趋势和变化。
43 )))
44 )))
45 1. (((
46 **线：**
47
48 1. (((
49 **定义：** 折线图中的线是由连接数据点而成的直线，用于将各个数据点串联起来形成折线。
50 )))
51 1. (((
52 **含义：** 折线代表了数据的变化趋势，通过线的走势可以直观地展现数据的增长、减少或者波动情况。
53 )))
54 )))
55
56 [[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=NmYwNTRlYTYzMjZhMDMzNjU0ZmI0MGNjYjJjMjgxNGFfRjFXU0dCRXJIZHNjMXRQVjlpM25VN3QzNXFIQ3VoV2RfVG9rZW46T1NIaGJQMjRKb3RjYzB4ekxmNWNXYzJJbkJnXzE3Mjk2NTU0MDk6MTcyOTY1OTAwOV9WNA]]
57
58
59
60 [[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=ZDNjZTM1NTMyNmYwNmUxOWNmNDg3MjQ0NGI0MGIxMWRfYkM1VWFOck5xUlh2NFFBNHNGbWhaYmJLVEFvTVVtWVZfVG9rZW46UUgxc2JpOFJFb2hPYk14SmN3amN5Uk9UbktjXzE3Mjk2NTU0MDk6MTcyOTY1OTAwOV9WNA]]
61
62
63
64
65 ====== 基本要求 ======
66
67 要实现折线图的效果，基本要求如下 。
68
69
70 |横轴|纵轴|分组|参考线
71 |最多1个字段|可选多个字段，最多30个字段|最多1个字段（分组功能：本次迭代先不做，放到后面实现）|可选多个字段，最多30个字段
72
73 ====== 配置步骤 ======
74
75 **Step-1 选择图形**
76
77 创建报表，选择折线图，如图：
78
79 [[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=NmZiMTk3YTNhMGRiMzk1NTBiYTg3MWE5MWZkYjI2OTNfVXdYa0FlTzVyQTc2b2NldFNwNk9ybWRZY1p1QTY3VnRfVG9rZW46SXFlZGJ4VnE2b3pXYTh4UDV2UWNFWHplbkdiXzE3Mjk2NTU0MDk6MTcyOTY1OTAwOV9WNA]]
80
81
82 **Step-2 选择图表展示字段**
83
84 将右边的字段拖动放到【横轴】、【纵轴】、【分组】、【参考线】上
85
86 **可以直接选择数据源下的字段，也可以通过公式生成，如何使用公式请查看 **报表公式
87
88 [[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=ZjQ4ZTRmYWQ1ZjZkMzEzNjNkNDIxNzZmYTI2ODI1MjlfYzl3eW9DdG1RdEdaS091eFBPRWwxcGNvam5Ma0I4SUdfVG9rZW46RmZSV2JMYlJhbzlRYXF4aE92ZmNXNHFXbm1kXzE3Mjk2NTU0MDk6MTcyOTY1OTAwOV9WNA]]
89
90
91 Step-3 样式设置
92
93 分为三小类：【基础】、【坐标轴】，【图例】，如下图
94
95 [[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=ZTdjYzMyZGZmN2FjNDZkMWNlMzA5YzM5ZTZjZWNmYWNfek1uOHgzbEwxRk1NMHUwdFVrUm5FRzJ2VjlqN3NKWkpfVG9rZW46U3l6MWJpWmVIb2oyVGx4ZEhGemNTQlAxblFlXzE3Mjk2NTU0MDk6MTcyOTY1OTAwOV9WNA]]
96
97
98 样式设置
99
100 |(% colspan="1" rowspan="1" %)(((
101
102 )))|(% colspan="1" rowspan="1" %)(((
103 样式设置分类
104 )))|(% colspan="1" rowspan="1" %)(((
105 配置项
106 )))|(% colspan="1" rowspan="1" %)(((
107 形态
108 )))|(% colspan="1" rowspan="1" %)(((
109
110 )))
111 |(% colspan="1" rowspan="29" %)(((
112 **折线图**
113
114
115 )))|(% colspan="1" rowspan="14" %)(((
116 基础
117
118
119 )))|(% colspan="1" rowspan="1" %)(((
120 显示标题
121 )))|(% colspan="1" rowspan="1" %)(((
122 开关
123 )))|(% colspan="1" rowspan="1" %)(((
124 默认开启
125 )))
126 |(% colspan="1" rowspan="1" %)(((
127 标题名称
128 )))|(% colspan="1" rowspan="1" %)(((
129 输入框
130 )))|(% colspan="1" rowspan="1" %)(((
131 默认输入：折线图
132 )))
133 |(% colspan="1" rowspan="1" %)(((
134 帮助文字
135 )))|(% colspan="1" rowspan="1" %)(((
136 开关
137 )))|(% colspan="1" rowspan="1" %)(((
138 默认关闭
139 )))
140 |(% colspan="1" rowspan="1" %)(((
141 帮助文字内容
142 )))|(% colspan="1" rowspan="1" %)(((
143 输入框
144 )))|(% colspan="1" rowspan="1" %)(((
145 占位提示：请输入
146 )))
147 |(% colspan="1" rowspan="1" %)(((
148 折线图类型
149 )))|(% colspan="1" rowspan="1" %)(((
150 选项卡
151 )))|(% colspan="1" rowspan="1" %)(((
152 默认选中“折线”
153 )))
154 |(% colspan="1" rowspan="1" %)(((
155 配色方案
156 )))|(% colspan="1" rowspan="1" %)(((
157 按钮或下拉
158 )))|(% colspan="1" rowspan="1" %)(((
159
160 )))
161 |(% colspan="1" rowspan="1" %)(((
162 显示缩略轴
163 )))|(% colspan="1" rowspan="1" %)(((
164 开关
165 )))|(% colspan="1" rowspan="1" %)(((
166 默认关闭
167 )))
168 |(% colspan="1" rowspan="1" %)(((
169 启用导出
170 )))|(% colspan="1" rowspan="1" %)(((
171 开关
172 )))|(% colspan="1" rowspan="1" %)(((
173 默认打开
174 )))
175 |(% colspan="1" rowspan="1" %)(((
176 导出格式
177 )))|(% colspan="1" rowspan="1" %)(((
178 多选
179 )))|(% colspan="1" rowspan="1" %)(((
180 同柱状图
181 )))
182 |(% colspan="1" rowspan="1" %)(((
183 展示点
184 )))|(% colspan="1" rowspan="1" %)(((
185 开关
186 )))|(% colspan="1" rowspan="1" %)(((
187 默认打开，关闭后画布上不显示折线的每个描点
188
189 [[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=OGU1N2I2NzVkMTYxNTI4YjE2NGU4NTUyMGQzOTZjNzNfajFIMVF3VEh4QkN5b1NuSUkxZ2FUWWo0aGJtOVNjWE9fVG9rZW46TjJndmJmQTBzb3dMdjd4R1lPb2NXU1p2blpSXzE3Mjk2NTU0MDk6MTcyOTY1OTAwOV9WNA]]
190
191
192 )))
193 |(% colspan="1" rowspan="1" %)(((
194 点大小
195 )))|(% colspan="1" rowspan="1" %)(((
196 下拉
197 )))|(% colspan="1" rowspan="1" %)(((
198 默认4，单位px（原型中隐藏了单位），选项：2,4,6,8,10
199 )))
200 |(% colspan="1" rowspan="1" %)(((
201 展示线
202 )))|(% colspan="1" rowspan="1" %)(((
203 开关
204 )))|(% colspan="1" rowspan="1" %)(((
205 默认打开，关闭后，折线消失，只显示点（看上去像散点图）
206
207 [[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=ZGQ4MmQzNWM4YmVjNmRiMGEzMGJlZWY2NDQxZmZhMmVfaUppWHBzcGp4UUpvZTJBQUJqV3Vnc2J5dXgzVzVSZWZfVG9rZW46UUpsaGJia0Nab0hWWER4dWlwYWN4VUNnbmJoXzE3Mjk2NTU0MDk6MTcyOTY1OTAwOV9WNA]]
208
209
210 )))
211 |(% colspan="1" rowspan="1" %)(((
212 线粗细
213
214
215 )))|(% colspan="1" rowspan="1" %)(((
216 下拉
217 )))|(% colspan="1" rowspan="1" %)(((
218 默认2，单位px（原型中隐藏了单位）选项：1,2,3,4,5,6
219 )))
220 |(% colspan="1" rowspan="1" %)(((
221 填充
222
223
224 )))|(% colspan="1" rowspan="1" %)(((
225 开关
226 )))|(% colspan="1" rowspan="1" %)(((
227 默认关闭， 打开后每个点向下填充半透明的颜色到X轴，效果如下：
228
229 [[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=ZmM4OTY5NzY1MmNmZDcxOTQ1ZGUyOTM3ZmFkYjZmZjZfVGtCSnF0M0MycTd1dUVUOFdPcmNQT3BPcU1oZ0NTcHFfVG9rZW46TXRueGJsV0NZb2hIYzF4cHZLZWNQS1RtblBnXzE3Mjk2NTU0MDk6MTcyOTY1OTAwOV9WNA]]
230
231
232 )))
233 |(% colspan="1" rowspan="7" %)(((
234 坐标轴-X轴
235
236
237 )))|(% colspan="1" rowspan="1" %)(((
238 显示轴标题
239
240
241 )))|(% colspan="1" rowspan="1" %)(((
242 开关
243 )))|(% colspan="1" rowspan="1" %)(((
244 默认开启
245 )))
246 |(% colspan="1" rowspan="1" %)(((
247 标题内容
248
249
250 )))|(% colspan="1" rowspan="1" %)(((
251 输入框
252 )))|(% colspan="1" rowspan="1" %)(((
253 显示轴标题开启后显示，这里没写标题文字的情况下，默认显示横/纵轴上第一个字段的名称
254 )))
255 |(% colspan="1" rowspan="1" %)(((
256 颜色字号
257 )))|(% colspan="1" rowspan="1" %)(((
258 拾色器+下拉
259 )))|(% colspan="1" rowspan="1" %)(((
260 默认：黑色，12号字
261 )))
262 |(% colspan="1" rowspan="1" %)(((
263 轴标签
264 )))|(% colspan="1" rowspan="1" %)(((
265 开关
266 )))|(% colspan="1" rowspan="1" %)(((
267 默认开启
268 )))
269 |(% colspan="1" rowspan="1" %)(((
270 颜色字号
271 )))|(% colspan="1" rowspan="1" %)(((
272 颜色字号
273 )))|(% colspan="1" rowspan="1" %)(((
274 默认：黑色，12号字
275 )))
276 |(% colspan="1" rowspan="1" %)(((
277 （轴标签）自动旋转
278 )))|(% colspan="1" rowspan="1" %)(((
279 勾选框
280 )))|(% colspan="1" rowspan="1" %)(((
281 默认勾选
282 )))
283 |(% colspan="1" rowspan="1" %)(((
284
285 )))|(% colspan="1" rowspan="1" %)(((
286
287 )))|(% colspan="1" rowspan="1" %)(((
288
289 )))
290 |(% colspan="1" rowspan="8" %)(((
291 坐标轴-Y轴
292
293
294 )))|(% colspan="1" rowspan="1" %)(((
295 显示轴标题
296
297
298 )))|(% colspan="1" rowspan="1" %)(((
299 开关
300 )))|(% colspan="1" rowspan="1" %)(((
301 默认开启
302
303
304 )))
305 |(% colspan="1" rowspan="1" %)(((
306 标题内容
307 )))|(% colspan="1" rowspan="1" %)(((
308 输入框
309 )))|(% colspan="1" rowspan="1" %)(((
310 显示轴标题开启后显示，这里没写标题文字的情况下，默认显示横/纵轴上第一个字段的名称
311 )))
312 |(% colspan="1" rowspan="1" %)(((
313 颜色字号
314 )))|(% colspan="1" rowspan="1" %)(((
315 拾色器+下拉
316 )))|(% colspan="1" rowspan="1" %)(((
317 默认：黑色，12号字
318 )))
319 |(% colspan="1" rowspan="1" %)(((
320 轴标签
321 )))|(% colspan="1" rowspan="1" %)(((
322 开关
323 )))|(% colspan="1" rowspan="1" %)(((
324 默认开启
325 )))
326 |(% colspan="1" rowspan="1" %)(((
327 （轴标签）自动旋转
328 )))|(% colspan="1" rowspan="1" %)(((
329 勾选框
330 )))|(% colspan="1" rowspan="1" %)(((
331 默认勾选
332 )))
333 |(% colspan="1" rowspan="1" %)(((
334 颜色字号
335 )))|(% colspan="1" rowspan="1" %)(((
336 颜色字号
337 )))|(% colspan="1" rowspan="1" %)(((
338 默认：黑色，12号字
339 )))
340 |(% colspan="1" rowspan="1" %)(((
341 刻度数
342 )))|(% colspan="1" rowspan="1" %)(((
343 输入框
344 )))|(% colspan="1" rowspan="1" %)(((
345 默认值：6， 即：标识Y轴默认有6个刻度
346 )))
347 |(% colspan="1" rowspan="1" %)(((
348
349 )))|(% colspan="1" rowspan="1" %)(((
350
351 )))|(% colspan="1" rowspan="1" %)(((
352
353 )))
354 |(% colspan="1" rowspan="1" %)(((
355
356 )))|(% colspan="1" rowspan="3" %)(((
357 图例
358
359
360 )))|(% colspan="1" rowspan="1" %)(((
361 显示图例
362 )))|(% colspan="1" rowspan="1" %)(((
363 开关
364 )))|(% colspan="1" rowspan="1" %)(((
365 默认开启
366 )))
367 |(% colspan="1" rowspan="1" %)(((
368
369 )))|(% colspan="1" rowspan="1" %)(((
370 图例位置
371 )))|(% colspan="1" rowspan="1" %)(((
372 八宫格
373 )))|(% colspan="1" rowspan="1" %)(((
374 默认选中：左上角
375 )))
376 |(% colspan="1" rowspan="1" %)(((
377
378 )))|(% colspan="1" rowspan="1" %)(((
379 颜色字号
380 )))|(% colspan="1" rowspan="1" %)(((
381 拾色器+下拉
382 )))|(% colspan="1" rowspan="1" %)(((
383 默认：黑色，12号字
384
385 （注意：这里指的是图例中文字Label的颜色和字号）
386 )))
387
388
389