Skip to Content
由用户 liuqing01 在 2025/06/18 10:07 保存的版本 12.1
显示最后作者
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:1750237187237-198.png]]
23
24 **Step-2 Add indicator field**
25
26 In the chart selection panel, select 'Add Metrics to Indicator Card graphic': Drag dataset fields into the Metrics section.
27
28 [[image:1750237242845-411.png]]
29
30 **Step-2  Style settings**
31
32 [[image:1742292450362-628.png]]
33
34 ==== **[Style Configuration Description]** ====
35
36 |(% colspan="1" rowspan="1" %)Classification|(% colspan="1" rowspan="1" %)Configuration Items|(% colspan="1" rowspan="1" %)Purpose
37 |(% colspan="1" rowspan="7" %)(((
38 Basic Style
39
40
41 )))|(% 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
42 |(% colspan="1" rowspan="1" %)Title name|(% colspan="1" rowspan="1" %)You can name the chart by yourself
43 |(% colspan="1" rowspan="1" %)Help text|(% colspan="1" rowspan="1" %)(((
44 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
45
46 [[image:1742292355305-673.png]]
47 )))
48 |(% 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
49 |(% 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.
50 |(% colspan="1" %)Enable export|(% colspan="1" %)After enabling, the client-side application can export indicator card data to local Excel files.
51 |(% colspan="1" rowspan="1" %)Cols/Row|(% colspan="1" rowspan="1" %)(((
52 Selectable options: 4 columns, 3 columns, or 2 columns.
53
54 [[image:1742292301873-589.png]]
55
56
57 )))
58 |(% colspan="1" rowspan="4" %)(((
59 Indicator card style
60
61
62 )))|(% colspan="1" rowspan="1" %)Indicator style|(% colspan="1" rowspan="1" %)Select either a solid fill style or a side-bar style for display.
63 |(% colspan="1" rowspan="1" %)Card background|(% colspan="1" rowspan="1" %)The background color of the indicator card can be customized.
64 |(% colspan="1" rowspan="1" %)Title color|(% colspan="1" rowspan="1" %)The title color of the indicator card can be customized.
65 |(% colspan="1" %)Indicator value|(% colspan="1" %)The font size, weight, and color of numbers in the indicator card can be adjusted.
66
67 (% 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"]]