Wiki源代码5.8.2.5 Indicator Card

由 liuqing01 于 2025/06/18 10:08 最后修改

version	line-number	content
12.1	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
12.1	11	\|Indicator\|Indicator field type
	12	\|Required, maximum of 8 fields.\|Must be an aggregatable field.
1.1	13
10.4	14	Indicator：The numbers displayed in the indicator cards are aggregated results, meaning that the indicator cards must exclusively show numerical values.
1.1	15
10.4	16	==== [Configuration steps] ====
1.1	17
10.4	18	Step-1 Select chart and configure data sources
1.1	19
10.4	20	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.
	21
13.1	22	[[image:1750241261946-144.png]]
1.1	23
13.1	24
10.5	25	Step-2 Add indicator field
1.1	26
10.6	27	In the chart selection panel, select 'Add Metrics to Indicator Card graphic': Drag dataset fields into the Metrics section.
1.1	28
13.1	29	[[image:1750241279860-224.png]]
1.1	30
13.1	31
10.7	32	Step-2 Style settings
1.1	33
10.14	34	[[image:1742292450362-628.png]]
1.1	35
10.7	36	==== [Style Configuration Description] ====
5.1	37
10.7	38	\|(% colspan="1" rowspan="1" %)Classification\|(% colspan="1" rowspan="1" %)Configuration Items\|(% colspan="1" rowspan="1" %)Purpose
10.9	39	\|(% colspan="1" rowspan="7" %)(((
10.8	40	Basic Style
1.1	41
	42
10.8	43	)))\|(% colspan="1" rowspan="1" %)Show title\|(% colspan="1" rowspan="1" %)Control whether the chart title in the upper left corner of the canvas is displayed. When closed, the chart title will not be displayed in the report, The words "Sales atatistis" are shown in the following figure
	44	\|(% colspan="1" rowspan="1" %)Title name\|(% colspan="1" rowspan="1" %)You can name the chart by yourself
	45	\|(% colspan="1" rowspan="1" %)Help text\|(% colspan="1" rowspan="1" %)(((
	46	Control whether the help copy is displayed in the chart. If enabled, client users can see a "?" icon after the chart title and the corresponding help copy when moving the mouse over the icon
7.1	47
10.14	48	[[image:1742292355305-673.png]]
1.1	49	)))
10.8	50	\|(% colspan="1" rowspan="1" %)Help text content\|(% colspan="1" rowspan="1" %)Enter a description of the chart here to help client users understand the chart data
10.9	51	\|(% colspan="1" %)Drill down\|(% colspan="1" %)After enabling, you can configure drill-down detail table reports that require setup. Please select a detail table report that shares the same data source as the current report.
	52	\|(% colspan="1" %)Enable export\|(% colspan="1" %)After enabling, the client-side application can export indicator card data to local Excel files.
	53	\|(% colspan="1" rowspan="1" %)Cols/Row\|(% colspan="1" rowspan="1" %)(((
	54	Selectable options: 4 columns, 3 columns, or 2 columns.
7.1	55
10.13	56	[[image:1742292301873-589.png]]
7.1	57
	58
	59	)))
10.11	60	\|(% colspan="1" rowspan="4" %)(((
10.9	61	Indicator card style
1.1	62
	63
10.9	64	)))\|(% colspan="1" rowspan="1" %)Indicator style\|(% colspan="1" rowspan="1" %)Select either a solid fill style or a side-bar style for display.
10.10	65	\|(% colspan="1" rowspan="1" %)Card background\|(% colspan="1" rowspan="1" %)The background color of the indicator card can be customized.
10.12	66	\|(% colspan="1" rowspan="1" %)Title color\|(% colspan="1" rowspan="1" %)The title color of the indicator card can be customized.
	67	\|(% colspan="1" %)Indicator value\|(% colspan="1" %)The font size, weight, and color of numbers in the indicator card can be adjusted.
1.1	68
2.1	69	(% 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"]]