Customization Guide for Embedding Page Styles
After creating Dashboards and Charts using the HENGSHI SENSE intelligent analysis platform, they can be embedded into existing systems via iframe. To achieve a unified style, rich customization options are supported when embedding the iframe.
Customize Dashboard's iframe
Parameter List
The following parameters are supported when embedding dashboards.
| Parameter Name | Parameter Function | Parameter Type | Parameter Value |
|---|---|---|---|
| copyright | This parameter controls the display status of the dashboard header and footer. | Boolean | Parameter values: true displays the header and footer, default is true. false does not display the header and footer. |
| header | This parameter controls the display status of the dashboard header. | Boolean | Parameter values: true displays the header, default is true. false does not display the header. |
| pager | This parameter controls the display status of the dashboard pager. | Boolean | Parameter values: true displays the pager, default is true. false does not display the pager. |
| scrollable | This parameter controls the scrolling behavior within the dashboard. | Boolean | Parameter values: true supports scrolling within the dashboard, default is true. false does not support scrolling within the dashboard. |
| chartAccessible | This parameter controls the chart interaction behavior of the dashboard. | Boolean | Parameter values: true supports opening charts for interaction, default is true. false does not support opening charts for interaction. |
| background | This parameter sets the background color of the dashboard. If the dashboard theme has already set the background color, this parameter will not take effect. | String | Parameter value style is rgba(255,255,255,1). |
| wrapperBackground | This parameter sets the background color of the parent div element of the dashboard, which can override the dashboard theme background color. | String | Parameter value style is rgba(255,255,255,1). |
| chartTitleColor | This parameter can set the title color of charts, affecting all chart titles (except filters) within the dashboard. Use with caution. | String | Parameter value style is rgba(255,255,255,1). |
| chartGap | This parameter can set the spacing between charts within the dashboard. | String | When using, pixel information is required, such as 10px. |
The following are deprecated parameters in the dashboard embedding scenario.
| Parameter Name | Parameter Function | Parameter Type | Parameter Value | Deprecation Note |
|---|---|---|---|---|
| padding | This parameter sets the padding within the dashboard. | String<number> | Example parameter value 0 0 0 0 | This parameter is no longer supported. |
| chartBackground | This parameter sets the background color of the chart control. | String | Example parameter value rgba(255,255,255,1) | This parameter is no longer supported. |
| chartPadding | This parameter sets the padding within the chart. | String<number> | Example parameter value 0 0 0 0 | This parameter is no longer supported. |
| borderRadius | This parameter sets the corner radius of the chart control. | String | Example parameter value 2px | Follows the dashboard theme settings. |
| borderWidth | This parameter sets the size of the chart's outer border. | String | Example parameter value 1px | Follows the dashboard theme settings. |
| borderColor | This parameter sets the color of the chart's outer border. | String | Parameter value style rgba(255,255,255,1) | Follows the dashboard theme settings. |
| borderStyle | This parameter sets the style of the chart's outer border. | String | Can set solid, dashed, dotted | Follows the dashboard theme settings. |
| filterPadding | This parameter sets the padding within the filter. | String<number> | Example parameter value 0 0 0 0 | This parameter is no longer supported. |
Example
As shown in the dashboard below, modify its background color and chart title color when embedding.
Original dashboard link and style:
https://preview.hengshi.com/private/share/E454FF2E910B7B9445C8F66391B25CCA/dashboard/EC0E826AB75FD2AA2C3D755CF8374DD6C
Embedded dashboard link and style:
https://preview.hengshi.com/private/share/E454FF2E910B7B9445C8F66391B25CCA/dashboard/EC0E826AB75FD2AA2C3D755CF8374DD6C?wrapperBackground=rgba(180,246,254,1)&chartTitleColor=rgb(0,0,0)©right=false&scrollable=false
Customize the iframe of the Chart
Parameter List
The following parameters are supported when embedding charts.
| Parameter Name | Parameter Function | Parameter Type | Parameter Value |
|---|---|---|---|
| showAction | This parameter sets the interaction buttons in the top-right corner. | Boolean | Parameter values: true displays the interaction buttons in the top-right corner, default is true. false does not display the interaction buttons in the top-right corner. |
| chartPadding | This parameter sets the padding inside the chart. | String<number> | Example parameter value: 0 0 0 0. |
The following parameters are deprecated and no longer supported.
| Parameter Name | Parameter Function | Parameter Type | Parameter Value | Deprecation Description |
|---|---|---|---|---|
| noFilter | This parameter controls whether to display the filter. | Boolean | Parameter values: true displays the filter, default is true. false does not display the filter. | Filters are no longer supported when embedding charts. |
| titleColor | This parameter sets the color of the chart title. | String | Example parameter value: rgba(255,255,255,1). | Chart titles are no longer displayed on the embedded page. |
| chartBackground | This parameter sets the background color of the chart. | String | Example parameter value: rgba(255,255,255,1). | The chart background color will be overridden by the theme background color used by the chart. |