Wiki源代码5.8.2.5 Indicator Card

由用户 maym 在 2025/03/18 09:19 保存的版本 10.7

version	line-number	content
10.2	1	==== [Usage Scenario] ====
1.1	2
10.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.
1.1	4
10.2	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.
1.1	6
9.3	7	[[image:1742287452034-168.png]]
1.1	8
10.3	9	==== [Basic Requirements ] ====
1.1	10
3.1	11	(% style="width:650.222px" %)
10.4	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.
1.1	14
10.4	15	Indicator：The numbers displayed in the indicator cards are aggregated results, meaning that the indicator cards must exclusively show numerical values.
1.1	16
	17
	18
10.4	19	==== [Configuration steps] ====
1.1	20
10.4	21	Step-1 Select chart and configure data sources
1.1	22
10.4	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
3.1	25	[[image:1729843542241-466.png]]
1.1	26
10.5	27	Step-2 Add indicator field
1.1	28
10.6	29	In the chart selection panel, select 'Add Metrics to Indicator Card graphic': Drag dataset fields into the Metrics section.
1.1	30
9.1	31	[[image:1737529303936-797.png]]
1.1	32
	33
10.7	34	Step-2 Style settings
1.1	35
4.1	36	[[image:1729843821098-935.png\|\|height="659" width="1281"]]
1.1	37
	38
	39
	40
10.7	41	==== [Style Configuration Description] ====
5.1	42
10.7	43	\|(% colspan="1" rowspan="1" %)Classification\|(% colspan="1" rowspan="1" %)Configuration Items\|(% colspan="1" rowspan="1" %)Purpose
	44	\|(% colspan="1" rowspan="5" %)(((
1.1	45	基础
	46
	47
	48	)))\|(% colspan="1" rowspan="1" %)(((
	49	显示标题
	50	)))\|(% colspan="1" rowspan="1" %)(((
7.1	51	默认关闭，开启后会在画布左上角显示指标卡的标题
1.1	52	)))
	53	\|(% colspan="1" rowspan="1" %)(((
	54	标题名称
	55	)))\|(% colspan="1" rowspan="1" %)(((
7.1	56	支持用户自定义标题名称
1.1	57	)))
	58	\|(% colspan="1" rowspan="1" %)(((
	59	帮助文字
	60	)))\|(% colspan="1" rowspan="1" %)(((
7.1	61	开启后，标题右侧出现小问号，鼠标悬浮时，出现帮助文字具体内容
	62
	63	[[image:1729844522588-836.png]]
1.1	64	)))
	65	\|(% colspan="1" rowspan="1" %)(((
	66	帮助文字内容
7.1	67	)))\|(% colspan="1" rowspan="1" %)支持用户自定义帮助文字的文案，例如“本月销售总额统计”
1.1	68	\|(% colspan="1" rowspan="1" %)(((
	69	每行列数
	70	)))\|(% colspan="1" rowspan="1" %)(((
7.1	71	(((
1.1	72	默认：4，可选值：4，3，2
7.1	73
	74	[[image:1729844573944-101.png\|\|height="365" width="1150"]]
1.1	75	)))
7.1	76
	77	(((
	78
	79	)))
	80	)))
1.1	81	\|(% colspan="1" rowspan="3" %)(((
	82	指标卡样式
	83
	84
	85	)))\|(% colspan="1" rowspan="1" %)(((
	86	指标卡风格
	87	)))\|(% colspan="1" rowspan="1" %)(((
7.1	88	支持用户切换：纯色填充，带侧边条，这2种展示风格
1.1	89	)))
	90	\|(% colspan="1" rowspan="1" %)(((
	91	背景色值
	92	)))\|(% colspan="1" rowspan="1" %)(((
7.1	93	支持用户自定义指标卡的背景色
1.1	94	)))
	95	\|(% colspan="1" rowspan="1" %)(((
	96	指标字号
	97	)))\|(% colspan="1" rowspan="1" %)(((
7.1	98	支持用户改变指标卡中数字的字号粗细，颜色
1.1	99	)))
	100
2.1	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"]]