Skip to Content
由用户 maym 在 2025/03/18 09:19 保存的版本 10.7
显示最后作者
1 ==== **[Usage Scenario]** ====
2
3 It is suitable for scenarios that require directly highlighting key data. For example, indicator cards can be used to display metrics such as total product sales, delivery quantity, and warehouse inventory levels.
4
5 As shown in the figure below, the indicator card directly displays the total sales amount, effectively highlighting this key metric in a card format.
6
7 [[image:1742287452034-168.png]]
8
9 ==== **[Basic Requirements ]** ====
10
11 (% style="width:650.222px" %)
12 |(% style="width:290px" %)Indicator|(% style="width:356px" %)Indicator field type
13 |(% style="width:290px" %)Required, maximum of 8 fields.|(% style="width:356px" %)Must be an aggregatable field.
14
15 **Indicator：**The numbers displayed in the indicator cards are aggregated results, meaning that the indicator cards must exclusively show numerical values.
16
17
18
19 ==== **[Configuration steps]** ====
20
21 **Step-1 Select chart and configure data sources**
22
23 Select the 'Indicator Card' in the chart selection panel: Clicking the indicator card on the homepage displays demo sample data, as shown in the figure below.
24
25 [[image:1729843542241-466.png]]
26
27 **Step-2 Add indicator field**
28
29 In the chart selection panel, select 'Add Metrics to Indicator Card graphic': Drag dataset fields into the Metrics section.
30
31 [[image:1737529303936-797.png]]
32
33
34 **Step-2  Style settings**
35
36 [[image:1729843821098-935.png||height="659" width="1281"]]
37
38
39
40
41 ==== **[Style Configuration Description]** ====
42
43 |(% colspan="1" rowspan="1" %)Classification|(% colspan="1" rowspan="1" %)Configuration Items|(% colspan="1" rowspan="1" %)Purpose
44 |(% colspan="1" rowspan="5" %)(((
45 基础
46
47
48 )))|(% colspan="1" rowspan="1" %)(((
49 显示标题
50 )))|(% colspan="1" rowspan="1" %)(((
51 默认关闭，开启后会在画布左上角显示指标卡的标题
52 )))
53 |(% colspan="1" rowspan="1" %)(((
54 标题名称
55 )))|(% colspan="1" rowspan="1" %)(((
56 支持用户自定义标题名称
57 )))
58 |(% colspan="1" rowspan="1" %)(((
59 帮助文字
60 )))|(% colspan="1" rowspan="1" %)(((
61 开启后，标题右侧出现小问号，鼠标悬浮时，出现帮助文字具体内容
62
63 [[image:1729844522588-836.png]]
64 )))
65 |(% colspan="1" rowspan="1" %)(((
66 帮助文字内容
67 )))|(% colspan="1" rowspan="1" %)支持用户自定义帮助文字的文案，例如“本月销售总额统计”
68 |(% colspan="1" rowspan="1" %)(((
69 每行列数
70 )))|(% colspan="1" rowspan="1" %)(((
71 (((
72 默认：4， 可选值：4，3，2
73
74 [[image:1729844573944-101.png||height="365" width="1150"]]
75 )))
76
77 (((
78
79 )))
80 )))
81 |(% colspan="1" rowspan="3" %)(((
82 指标卡样式
83
84
85 )))|(% colspan="1" rowspan="1" %)(((
86 指标卡风格
87 )))|(% colspan="1" rowspan="1" %)(((
88 支持用户切换：纯色填充，带侧边条 ，这2种展示风格
89 )))
90 |(% colspan="1" rowspan="1" %)(((
91 背景色值
92 )))|(% colspan="1" rowspan="1" %)(((
93 支持用户自定义指标卡的背景色
94 )))
95 |(% colspan="1" rowspan="1" %)(((
96 指标字号
97 )))|(% colspan="1" rowspan="1" %)(((
98 支持用户改变指标卡中数字的字号粗细，颜色
99 )))
100
101 (% contenteditable="false" style="background-image:url(http://192.168.102.35:8080/webjars/wiki%3Axwiki/xwiki-platform-ckeditor-webjar/16.8.0/plugins/widget/images/handle.png); background:rgba(220,220,220,0.5); display:none" tabindex="-1" %)[[image:data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==||draggable="true" height="15" role="presentation" title="拖曳以移動" width="15"]]