Highcharts Dashboards 仪表板布局的使用文档

布局（Layout）

概述

组件的布局位置是任何仪表盘的一个关键部分。布局可以最初通过配置对象定义，然后在启用编辑模式时进行调整。以下是仪表盘布局的基本组成部分。

Green boxes绿色框：行/rows
Red boxes红色框：单元格 / individual cells
Blue boxes: nested layout inside a cell

要使用带有布局系统和编辑模式的仪表盘，首先必须加载 layout 模块。

html 复制代码

<script src="https://code.highcharts.com/dashboards/dashboards.js"></script>
<script src="https://code.highcharts.com/dashboards/modules/layout.js"></script>

或者，你可以下载NPM包，例如

bash 复制代码

npm install @highcharts/dashboards

并在你的项目中导入它，比如：

js 复制代码

import * as Dashboards from '@highcharts/dashboards';
import LayoutModule from '@highcharts/dashboards/modules/layout';

LayoutModule(Dashboards);

如果你使用ESM，可以按如下方式导入模块：

js 复制代码

import Dashboards from '@highcharts/dashboards/es-modules/masters/dashboards.src.js';
import '@highcharts/dashboards/es-modules/masters/modules/layout.src.js';

行（Rows）

每个布局至少由一行组成，这一行横跨整个外部布局的宽度。使用编辑模式，你可以改变这一行的宽度和高度，以及调整其中的单元格大小。每一行可以有自己的样式定义，其单元格可以用 JavaScript 对象或 JSON 来定义。

单元格（Cells）

每一行至少包含一个单元格，但同一行中可以有多个单元格。这些单元格是组件或嵌套布局的容器。

嵌套布局示例

Dashboard 布局引擎如何使您的仪表盘具有响应性

布局计算组件的位置。通常，每行按列排列，单元格按行排列。当处理resizer模块时，事情变得更加复杂，它允许你改变行和单元格的宽度和高度。dashboard布局引擎基于Flexbox，通过设置百分比值的宽度和高度，当外部容器调整大小时，单元格和行大小会动态调整。这可能发生在嵌套布局中，当多个行位于一个单元格中时，该单元格也可以调整大小。

使用常规的CSS媒体查询来调整您的布局以适应不同的屏幕。

Example:

css 复制代码

/* LARGE */
@media (max-width: 1200px) {
    #dashboard-cell-1 {
        flex: 1 1 33.333%;
    }
}
  
/* MEDIUM */
@media (max-width: 992px) {
    #dashboard-cell-1 {
        flex: 1 1 50%;
    }
}
  
/* SMALL */
@media (max-width: 576px) {
    #dashboard-cell-1 {
        flex: 1 1 100%;
    }
}

除了常规的 CSS 媒体查询外，你还可以使用容器查询container queries，这在你的仪表盘不横跨整个窗口宽度时会更有意义。请参阅使用了这种技术的示例demo。

示列:

css 复制代码

/* Create a containment context */
#container {
    container: dashboard / inline-size;
}

/* LARGE */
@container dashboard (max-width: 1200px) {
    #dashboard-cell-1 {
        flex: 1 1 33.333%;
    }
}

/* MEDIUM */
@container dashboard (max-width: 992px) {
    #dashboard-cell-1 {
        flex: 1 1 50%;
    }
}

/* SMALL */
@container dashboard (max-width: 576px) {
    #dashboard-cell-1 {
        flex: 1 1 100%;
    }
}

自定义布局

如果你更喜欢使用自定义布局结构，可以随意这样做。你只需要通过选项禁用图形界面即可。此外， layout.js模块在这种情况下也不需要。请记住，每个容器都应有一个唯一的 id 用于渲染组件。

js 复制代码

    gui: {
        enabled: false
    },
    components: [{
        renderTo: 'dashboard-col-0',
        type: 'Highcharts',
        chartOptions: {
            chart: {
                type: 'pie'
            },
            series: [{
                data: [1,2,3]
            }]
        },
    }]

这里是独立演示demo 和 Tailwind演示 demo.

*注意！禁用 gui后，无法使用编辑模式Edit Mode 模块。