Skip to Content
由用户 maym 在 2025/03/18 10:09 保存的版本 10.15
显示最后作者
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:1742292540188-800.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:1742292499859-182.png]]
32
33
34 **Step-2  Style settings**
35
36 [[image:1742292450362-628.png]]
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="7" %)(((
45 Basic Style
46
47
48 )))|(% 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
49 |(% colspan="1" rowspan="1" %)Title name|(% colspan="1" rowspan="1" %)You can name the chart by yourself
50 |(% colspan="1" rowspan="1" %)Help text|(% colspan="1" rowspan="1" %)(((
51 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
52
53 [[image:1742292355305-673.png]]
54 )))
55 |(% 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
56 |(% 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.
57 |(% colspan="1" %)Enable export|(% colspan="1" %)After enabling, the client-side application can export indicator card data to local Excel files.
58 |(% colspan="1" rowspan="1" %)Cols/Row|(% colspan="1" rowspan="1" %)(((
59 (((
60 Selectable options: 4 columns, 3 columns, or 2 columns.
61
62 [[image:1742292301873-589.png]]
63 )))
64
65 (((
66
67 )))
68 )))
69 |(% colspan="1" rowspan="4" %)(((
70 Indicator card style
71
72
73 )))|(% colspan="1" rowspan="1" %)Indicator style|(% colspan="1" rowspan="1" %)Select either a solid fill style or a side-bar style for display.
74 |(% colspan="1" rowspan="1" %)Card background|(% colspan="1" rowspan="1" %)The background color of the indicator card can be customized.
75 |(% colspan="1" rowspan="1" %)Title color|(% colspan="1" rowspan="1" %)The title color of the indicator card can be customized.
76 |(% colspan="1" %)Indicator value|(% colspan="1" %)The font size, weight, and color of numbers in the indicator card can be adjusted.
77
78 (% 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"]]