Highcharts 仪表板 CSS 样式定制使用说明

CSS 样式定制

每个仪表盘及其大部分子元素默认都使用CSS进行样式设计。这种方法提供了在不改变仪表盘配置或底层应用程序代码的情况下，修改其外观和感觉的可能性。大多数HTML元素都配有CSS类，也可以使用自定义类或元素标识符。

如果你偏好在HTML中使用自定义布局，你需要禁用 GUI或完全省略它。记住每个容器都必须渲染成一个具有唯一 id的HTMLdiv。

js 复制代码

    gui: {
        enabled: false
    }

独立的演示demo.

Tailwind的演示demo.

*请注意，使用自定义HTML布局时不能使用编辑模式Edit Mode 。

导入CSS

如下所示，必须显式导入CSS：

css 复制代码

@import url("https://code.highcharts.com/dashboards/css/dashboards.css");
@import url("https://code.highcharts.com/dashboards/css/datagrid.css");

仅在仪表盘中使用Grid组件时，才需要文件 datagrid.css 。

通用CSS类

每个类名都包含前缀 highcharts-dashboards 和描述元素的后缀。例如，仪表盘行的类名是 highcharts-dashboards-row。

这些是最基本的元素及其相关的CSS类：

highcharts-dashboards - 仪表盘的主要类
highcharts-dashboards-row - 仪表盘行的类
highcharts-dashboards-cell - 仪表盘单元格的类
highcharts-dashboards-component - 仪表盘组件的类

其他所有类都是针对每个组件或元素的特定类。

要访问和设置整个仪表盘、其背景以及组件的样式，你可以使用以下内容：

css 复制代码

.highcharts-dashboards,
.highcharts-dashboards-wrapper {
    background-color: #f2f9fd;
}

为仪表盘的行设置样式:

css 复制代码

.highcharts-dashboards-row {
    padding: 10px;
}

为仪表盘的单元格设置样式:

css 复制代码

.highcharts-dashboards-cell {
    text-align: left;
}

要设置仪表盘div组件及其内容的样式：

css 复制代码

.highcharts-dashboards-component {
    border-radius: 10px;
}

组件类

每个组件都具有通用的组件CSS类 highcharts-dashboards-component，以及针对该组件的专用CSS类。例如，关键绩效指标（KPI）组件的类是highcharts-dashboards-component-kpi。

为仪表盘的组件标题设置样式：

css 复制代码

.highcharts-dashboards-component-title {
    font-size: 12px;
}

为仪表盘的组副标题设置样式：

css 复制代码

.highcharts-dashboards-component-subtitle {
    font-size: 10px;
}

KPI 组件

要设置仪表盘KPI组件div及其内容的样式：

css 复制代码

.highcharts-dashboards-component-kpi {
    border-radius: 10px;
}

为仪表盘的KPI数值设置样式：

css 复制代码

.highcharts-dashboards-component-kpi-value {
    color: red;
}

要正确设置KPI的图表元素样式，你需要在组件配置中将styledMode 选项设置为true。

js 复制代码

{
    type: 'KPI',
    renderTo: 'kpi-container',
    chartOptions: {
        chart: {
            styledMode: true
        }
        ...
    }
    ...
}

Highcharts 组件

要为仪表盘的 Highcharts 组件 div 及其内容设置样式：

css 复制代码

.highcharts-dashboards-component-highcharts {
    background-color: gray;
}

要为 Highcharts 组件的图表元素设置样式，您需要在组件配置中将 styledMode 选项设置为true。

js 复制代码

{
    type: 'Highcharts',
    renderTo: 'chart-container',
    chartOptions: {
        chart: {
            styledMode: true
        }
        ...
    }
    ...
}

有关如何单独设置仪表盘的 Highcharts chart 样式的信息，请参阅文章样式 Highcharts 图表。

Grid 网格组件

要为仪表盘的网格组件 div 及其内容设置样式：

css 复制代码

.highcharts-datagrid-container {
    border-radius: 10px;
}

有关网格组件样式的详细指南，请参考主题介绍文章。

HTML 组件

由于用户定义了整个HTML组件的结构，因此在不同的使用场景中会有所不同。实际上，HTML可以像任何HTML元素div 一样进行样式设计，包括其子元素，建议使用自定义类和ID来进行样式设置。

详细信息请参见下方部分。

自定义类

每个组件或元素在仪表盘配置中都可以有自定义的类或ID。您可以利用它来定义更好的 CSS 选择器，从而美化仪表盘。

查看HTML组件是如何配置的，以及id和class是如何使用的：

ts 复制代码

{
    type: 'HTML',
    renderTo: 'dashboard-row-1-cell-3',
    elements: [
        {
            tagName: 'div',
            children: [
                {
                    tagName: 'h4',
                    textContent: 'Check how you can save more!',
                    attributes: {
                        class: 'main-title'
                    }
                },
                {
                    tagName: 'button',
                    textContent: 'Go to the saving account',
                    attributes: {
                        id: 'saving-button'
                    }
                }
            ]
        }
    ]
},

可以使用自定义类和ID来为仪表盘添加样式：

css 复制代码

#saving-button {
    border: none;
    cursor: pointer;
}

最终效果可能如下：

编辑模式类

你还可以更改编辑模式的外观。编辑模式基于侧边栏、工具栏、弹出窗口等元素。每个元素都有自己的类，你可以用它来设置样式。

确认弹窗

为仪表盘的弹窗设置样式：

css 复制代码

.highcharts-dashboards-confirmation-popup {
    border-radius: 10px;
}

为仪表盘的覆盖层设置样式：

css 复制代码

.highcharts-dashboards-overlay {
    background-color: gray;
}

为仪表盘的弹窗关闭按钮设置样式：

css 复制代码

.highcharts-dashboards-popup-close {
    background-color: gray;
}

侧边栏

为了给侧边栏中的仪表盘菜单添加样式：

css 复制代码

.highcharts-dashboards-accordion-menu {
    background-color: gray;
}

为了给仪表盘菜单中的侧边栏标题添加样式：

css 复制代码

.highcharts-dashboards-accordion-header {
    font-size: 12px;
}

工具栏

在编辑模式下为仪表盘工具栏设置样式：

css 复制代码

.highcharts-dashboards-toolbar {
    background-color: gray;
}

高亮设置

为已编辑单元格的高亮部分设置样式：

css 复制代码

.highcharts-dashboards-toolbar-cell-outline {
    border-color: red;
}

为已编辑行的高亮部分设置样式：

css 复制代码

.highcharts-dashboards-toolbar-row-outline {
    border-color: blue;
}