Wiki源代码5.8.2.5 Indicator Card
显示最后作者
| author | version | line-number | content |
|---|---|---|---|
| 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:1729843542241-466.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:1737529303936-797.png]] | ||
| 32 | |||
| 33 | |||
| 34 | **Step-2 Style settings** | ||
| 35 | |||
| 36 | [[image:1729843821098-935.png||height="659" width="1281"]] | ||
| 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:1729844522588-836.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:1729844573944-101.png||height="365" width="1150"]] | ||
| 63 | ))) | ||
| 64 | |||
| 65 | ((( | ||
| 66 | |||
| 67 | ))) | ||
| 68 | ))) | ||
| 69 | |(% colspan="1" rowspan="3" %)((( | ||
| 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" %)((( | ||
| 75 | 背景色值 | ||
| 76 | )))|(% colspan="1" rowspan="1" %)((( | ||
| 77 | 支持用户自定义指标卡的背景色 | ||
| 78 | ))) | ||
| 79 | |(% colspan="1" rowspan="1" %)((( | ||
| 80 | 指标字号 | ||
| 81 | )))|(% colspan="1" rowspan="1" %)((( | ||
| 82 | 支持用户改变指标卡中数字的字号粗细，颜色 | ||
| 83 | ))) | ||
| 84 | |||
| 85 | (% 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"]] |