Highcharts Dashboards 仪表板“编辑模式”文档使用说明

编辑模式

编辑模式是一种允许用户通过用户界面（UI）更改仪表盘外观的模式。

当仪表盘使用自定义HTML结构声明时，编辑模式仅限于组件设置。

介绍

为了能够使用Dashboards 仪表盘与布局系统和编辑模式，您首先需要加载layout模块。

导入顺序很重要，请确保在导入仪表盘模块之后再导入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 @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';

此外，必须在仪表盘配置中启用此选项：

js 复制代码

editMode: {
    enabled: true,
    contextMenu: {
        enabled: true
    }
},

现在可以通过右上角的菜单图标启用编辑模式。

启用编辑模式后，仪表盘的外观会发生变化。当将鼠标悬停在单元格上时，会出现一个蓝色边框。包含该单元格的行的边框会变成绿色。此外，行和单元格都会显示工具提示，用户可以通过它来调整位置、修改选项或直接删除。

请注意，当仪表盘使用自定义HTML结构声明时，只能编辑组件设置，布局无法更改。

在汉堡菜单旁边，添加了"添加组件 [Add Component](#Add Component) "按钮。

添加组件

仅在使用布局系统声明Dashboarda 时可用------使用 gui 配置.

Add Component 按钮允许用户添加新组件。点击后，会出现一个侧边栏，它让你选择要添加的组件类型，然后通过拖放操作，可以选择组件类型并拖动到正确的位置，位置由放置标记指示。

侧边栏列出了由 Dashboards 提供的组件类型，但只包括已加载模块的那些类型。如果需要其他类型，可以添加额外的模块。列表中的顺序和组件可以通过在 editMode 选项中的 components 数组进行调整， - API.

若要向列表中添加其他自定义组件，请遵循"自定义组件指南" custom component guide。

将组件拖放到布局中的首选位置后，会出现一个侧边栏，显示组件设置 component settings 。

组件设置

每种组件类型都有其自身的属性。最重要的属性可以通过设置侧边栏进行调整。添加任何组件后，设置侧边栏会自动打开，也可以通过点击在编辑模式下点击单元格后出现的工具栏中的齿轮图标来打开。

下面可以看到 Highcharts 组件的设置类别。

前三个类别，Connector name, Title 和 Caption, 是其他组件也共享的选项。在 Connector name 中，你可以连接一个现有的连接器，它将为组件（在本例中为图表）提供数据。其余的选项是此组件的常规配置项。你可以用它们来设置图表的外观。

如果你不打算使用连接器，可以通过组件的内部选项来设置数据。在 Highcharts 组件中，你可以在 series.data 选项中定义数据。在 KPI Component组件中，则通过设置 value 选项实现。

通过使用编辑模式示列，可以实际查看组件设置侧边栏的工作方式。

自定义组件设置

侧边栏中显示的内容可以通过在组件选项中设置 editableOptions 属性进行自定义。

editableOptions 属性是一个对象数组，其中每个对象表示设置侧边栏中的一个类别。每个对象都可以有以下属性：

name - 分类的名称
propertyPath - 指向应被编辑的组件选项中的属性路径
type - 输入字段的类型。它可以是以下几种之一：
- input - 简单文本输入框
- textarea - 文本区域
- toggle - 开关切换
- select - 一个需要 selectOptions 属性的选择输入框
- nested - 一个嵌套类别，要求提供 nestedOptions 属性
isStandalone - 一个布尔值，表示该类别是否应作为独立类别显示，还是作为父类别的一部分。

js 复制代码

    ...
    renderTo: 'dashboard-cell-0',
    type: 'Highcharts',
    editableOptions: [{
        isStandalone: true,
        name: 'Component title',
        propertyPath: ['title'],
        type: 'input'
      }, {
        name: 'chartOptions',
        type: 'nested',
        nestedOptions: [{
          name: 'Marker Radius',
          options: [{
            name: 'Marker Radius',
            propertyPath: [
              'chartOptions',
              'plotOptions',
              'series',
              'marker',
              'radius'
            ],
            type: 'select',
            selectOptions: [{
              name: 3
            }, {
              name: 5
            }]
          }]
        }]
      }
    ]

了解它的工作原理请查看编辑模式实时示例。

自定义右键菜单

contextMenu 选项还允许你进行编辑，内容是点击汉堡菜单后显示的菜单。菜单项可以是像 editMode 这样的字符串（如果是默认按钮），也可以是一个对象，定义按钮的名称、onclick 事件以及其他一些选项。以下是上下文菜单按钮配置的示例片段：

js 复制代码

items: [{
    id: 'custom-id',
    type: 'toggle',
    text: 'Custom Name',
    events: {
        click: function () {
            // onClick Event
        }
    }
}]

编辑模式示例

使用右上角的菜单启用并探索编辑模式。

编辑模式事件

可以为 board.editMode 对象添加事件监听器，当编辑布局或任何组件时，会调用回调函数。

可用的事件有：

componentChanged - 在接受组件编辑侧边栏中的更改后触发。
componentChangesDiscarded - 在放弃组件编辑侧边栏中的更改后被触发。
layoutChanged - 在布局更改后被调用，它有六种类型：
- newLayout - 在向面板添加新布局后被调用，
- newComponent - 在向面板添加新组件后被调用，
- rowDestroyed - 在删除行后调用，
- cellDestroyed - 在删除单元格后调用，
- cellDragEnd - 在移动单元格后调用，
- rowDragEnd - 在移动行后被调用。

示列：

js 复制代码

U.addEvent(editMode, 'componentChanged', e => {
    console.log('Component Changed', e);
});

U.addEvent(editMode, 'componentChangesDiscarded', e => {
    console.log('Component Changes Discarded', e);
});

U.addEvent(editMode, 'layoutChanged', e => {
    console.log('Layout Changed', e);
});

查看演示 demo.

样式

所有编辑模式的默认样式都定义在 dashboards.css 文件中。可以通过在你的CSS文件中添加以下行来导入：

css 复制代码

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

你可以通过向你的项目添加自己的样式来覆盖它们，例如：

css 复制代码

.highcharts-dashboards-edit-sidebar {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
}

请注意，用于编辑仪表盘的大多数元素（弹出窗口、工具栏、控件等）都具有较高的（大约9999）z-index值，因此它们总是位于其他元素之上。如果你想改变这种行为，可以在你的CSS文件中覆盖z-index值。