反馈已提交

网络繁忙

Dashboard Style

  • Last update:  2023-04-03
  • Application Scenarios

    After creating a dashboard, if you need to beautify it, you may want to change or customize the dashboard style.

    Or you may want to reuse saved custom styles when creating other dashboards.

    Functions

    FineBI provides dashboard style settings, which can set the background, title, components, chart/table styles, colors, filter component subjects of the entire dashboard.

    l  Dashboards with Preset styles are available.

    l  Dashboards that support Passing a value to the jump destination are available.

    l  You can use the custom styles of this dashboard in other dashboards by clicking Save as default style.

    The instructions for setting these three types of dashboard styles are shown in the table below:

    The Preset Dashboard Style

    Style Instruction

    Custom Styles

     

    Only the current user can add, delete, and rename custom styles. A user can add no more than 3 custom styles.

    Note: If you need to modify the custom style, you can click the target dashboard style to set. Then click Save as default style and delete the original dashboard style.

    Global Styles

    Only admins can add, delete, modify, and rename global styles. Admins can add no more than 5 global styles.

    The   default style of the dashboard is the global style set by the admin. For details, see BI Global Style.

    Preset Styles

    The system already has preset styles which cannot be deleted, modified, or renamed. 

    Premise

    You have already created the components and added them to the dashboard.

    Constraints

    l  Scope of custom styles that take effect: All dashboards you have created can be set in previously saved custom styles.

    l  Scope of unsaved custom styles that take effect: the current dashboard

    l  When the component is not added to the dashboard, the component style is the default style. After being added to the dashboard, the component will inherit the dashboard style if the dashboard style has been set.

    l  The priority order of the dashboard style that takes effect: component style > dashboard style > BI global style

    l  The default dashboard style can only be changed by admins. For details of procedures, see BI Global Style.

    l  For older versions of IE browsers (generally older than IE 10), the background styles of some components and component title background styles may be affected.

    Changing Dashboard Style

    Go to the editing interface of the analysis subject, select the corresponding dashboard, and click Dashboard Style.

    1678850648684397.png

    Click Preset to set the dashboard style. Click OK to change the style.

    QQ图片20230313093006.png

    Setting Custom Style

    Click Dashboard Style in the dashboard editing interface. Then click Passing a value to the jump destination to enter the custom style editing interface.

    QQ图片20230313093146.png

    Note: After editing, the custom style's preview effect will be automatically displayed on the dashboard. Click OK and the custom style can take effect. If the custom style is not saved as the default style, it will only take effect on this dashboard.

    Custom dashboard style settings are shown in the table below:

    Style

    Available Options

    Basic Style

    Choose a preset style and customize it based on the style.

    Save as a Default Style

    Click Save as default style to save it as a preset style which will be displayed on the Preset tab page. It can be applied to other dashboards.

    Dashboard

    Dashboard background and component gap

    Component

    Title background, title text, component background, and component border

    Chart

    The overall color scheme of the chart and the text format within the chart

    Table

    Table style, theme color, and text format

    Filter Component

    Title background, title text format, component background, component border, and   theme color

    Setting Basic Style

    Select the basic style as Blue Gray. And modify on this basis.

    QQ图片20230313093338.png

    Setting Dashboard Style

    1. Click Dashboard to set the style. The dashboard's Background and Component Gap can be set.

    Set the background color as blue-purple, and set the component gap as 12.

    Note: If the component is allowed to be overlapped, even if there is a gap between the components set in the dashboard style, the components can still be displayed overlapped.

    QQ图片20230313093716.png

    2. The dashboard settings are explained in the table below:

    Setting a Dashboard

    Description

    Background

    The dashboard background can be set as Color or Picture.

    Color: Click Color to set the background color. You can customize the color, or you can click Transparency or Auto.

    Picture: Click Picture to upload a picture as the dashboard background. There are no requirements for the size and pixels of the uploaded background picture.

    If you want to match the size of the picture with that of the dashboard, the size parameter for reference is 3840 * 2160.

    Component Gap

    You can set the gap size between components. No gap will be left if you set it as 0.

    Setting Component Style

    Setting Component Title

    You can set the component's Title Background and Font in the component setting.

    1. Click Title Style > Science Title Decoration to set the title background style.

    QQ图片20230313145639.png

    2. Set the title font Click Passing a value to the jump destination and set the font size as 14.

    QQ图片20230313094129.png

    3. The title setting instructions are shown in the table below:

    Title Setting

    Description

    Background

    The title background can be set as either Color or Title Style.

    Color: Click Color to set the background color. You can customize the color, or you can click Transparency or Auto.

    Title style: You can set the title style as Custom Picture or other various styles. Custom pictures can be uploaded as the title background. There are no requirements for the size and pixels of the background picture.

    Text

     

    The title font can be set as Auto or Passing a value to the jump destination.

    For details, see Component Title - Edit Title.

    Setting Component Background Style

    In the component, you can uniformly set the background of all components in the dashboard. The background is divided into Color and Component Style.

    l  Color

    Set the color as Auto, set the component border's Rounded Corner as 6 pixels, and set the Border size as 5. The effect is shown below:

    QQ图片20230313094419.png

    l  Component Style

    The component background setting is shown below:

    Note: Component styles can be set as custom pictures or other various styles. Custom pictures can be uploaded as backgrounds. There are no requirements for the size and pixels of the background pictures.

    QQ图片20230313094554.png

    Setting Chart Style

    You can set the Color of the charts in the dashboard and the text style in the charts.

    QQ图片20230313094924.png

    The detailed instruction of chart settings is shown in the following table:

    Chart Settings

    Description

    Color

    1. You can modify the color of the component elements in the chart as needed.

    2. You can customize the chart color.

    Text

    The texts that support font style configuration include the text of the horizontal and vertical axes, category axis, and value axis in the chart.

    The title text can be set as Auto or Passing a value to the jump destination.

    For details, see Component Title - Edit Title.

    Setting Table Style

    1. In the table setting, you can uniformly set the style of all table components in the dashboard, including Style, Theme Color, and text. The font styles of Header and Body can be set separately in the custom setting of text.

    QQ图片20230313095157.png

    The details of the table settings are explained as follows:

    Table Setting

    Description

    Styles

    There are three different styles that can be set for the whole table.

    Theme Color

    Click the drop-down list to set the theme color of the table component. Click More to customize the theme color, or click Transparency and Auto to achieve different effects.

    Text

    The font style can be set as either Auto or Passing a value to the jump destination. In the custom setting, you can set the font styles of Header and Body separately.

    For details, see Component Title - Edit Title.

    You can set alignment ways of the body's dimensions and indicators.

    Setting Filter Component Style

    In the filter component, you can uniformly set the style of all filter components in the dashboard. You can set the title background, title font, component background, and theme color.

    Set the background of the filter component title as blue, the title text as Auto, the background of the component as blue, the component border as rounded gray, and the border thickness as 3. Then set the theme color of the filter component selection box as pink.

    QQ图片20230313100217.png

    Filter Component Settings

    Description

    Title Background

    The title background can be set as either Color or Picture.
    Color: Click Color to set the background color. You can customize the color, or you can click Transparency or Auto.

    Picture: Click Upload image to upload a   picture as the dashboard background. There are no requirements for the size   and pixels of the background picture.

    Title Font

    The title font can be set as Auto or Passing a value to the jump destination.

    For details, see Component Title - Edit Title.

    Component Background

    Just like the title background setting, the component background can be set as Color or Picture.

    You can also set the component's border thickness, color and border's Rounded   Corner.

    Theme Color

    You can set the theme color of the filter component selection box.

    Adding Custom Style

    After setting the custom dashboard style, if you need to reuse it in other dashboards, you can click Save as default style. Then the custom style will appear in the preset styles.

    Note: A user can add no more than 3 custom styles.

    Renaming Custom Style

    Under the Preset tab and click the added custom style title to rename it.

    Note: Only admins can rename the global style set by themselves and the system's preset styles from one to six cannot be modified.

    QQ图片20230313110552.png

    Deleting Custom Style

    Stop the mouse at the saved custom style and you will find a Delete button in the upper left corner. Click Delete and then click OK to delete it.

    Note: Only admins can delete the global style set by themselves. The system's preset styles from one to six cannot be modified.

    QQ图片20230313151101.png


    附件列表


    主题: Creating a Dashboard
    • Helpful
    • Not helpful
    • Only read

    feedback

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭