Skip to Content
由 liuqing01 于 2025/06/18 10:08 最后修改
显示最后作者
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 |Indicator|Indicator field type
12 |Required, maximum of 8 fields.|Must be an aggregatable field.
13
14 **Indicator：**The numbers displayed in the indicator cards are aggregated results, meaning that the indicator cards must exclusively show numerical values.
15
16 ==== **[Configuration steps]** ====
17
18 **Step-1 Select chart and configure data sources**
19
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
22 [[image:1750241261946-144.png]]
23
24
25 **Step-2 Add indicator field**
26
27 In the chart selection panel, select 'Add Metrics to Indicator Card graphic': Drag dataset fields into the Metrics section.
28
29 [[image:1750241279860-224.png]]
30
31
32 **Step-2  Style settings**
33
34 [[image:1742292450362-628.png]]
35
36 ==== **[Style Configuration Description]** ====
37
38 |(% colspan="1" rowspan="1" %)Classification|(% colspan="1" rowspan="1" %)Configuration Items|(% colspan="1" rowspan="1" %)Purpose
39 |(% colspan="1" rowspan="7" %)(((
40 Basic Style
41
42
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
47
48 [[image:1742292355305-673.png]]
49 )))
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
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.
55
56 [[image:1742292301873-589.png]]
57
58
59 )))
60 |(% colspan="1" rowspan="4" %)(((
61 Indicator card style
62
63
64 )))|(% colspan="1" rowspan="1" %)Indicator style|(% colspan="1" rowspan="1" %)Select either a solid fill style or a side-bar style for display.
65 |(% colspan="1" rowspan="1" %)Card background|(% colspan="1" rowspan="1" %)The background color of the indicator card can be customized.
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.
68
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"]]