Highcharts Dashboards 看板组件类型使用文档说明

Dashboards 看板组件类型

组件是Dashboards 仪表板布局的核心构建单元。

系统提供多种开箱即用的组件类型。其中KPI、Highcharts和Grid组件预置了默认配置，而HTML组件可根据具体需求灵活定制。用户也可创建并注册自定义组件。

核心参数概述

以下是组件最关键参数的简要说明：

id - 组件的唯一标识符，用于仪表板识别或CSS样式配置
renderTo - 指定组件渲染目标单元格的ID标识
className - 应用于组件容器的CSS类名
type - 组件类型，可选值： HTML, KPI, Highcharts,
Grid 或自定义类型.
events - 事件回调函数对象，键为事件名称，值为对应回调函数。完整事件列表详见API参考文档，其中最常用的是 mount事件
sync -设定组件间需同步的事件列表

HTML 组件

这是最基础且通用的组件类型，支持所有HTML标准内容定义及自定义事件处理。

HTML组件提供两种定义方式：

1. 抽象语法树（AST）模式

将HTML代码定义为嵌套树状结构 tree structure进行配置

Code snippet:

js 复制代码

{
    type: 'HTML',
    renderTo: 'dashboard-1',
    elements: [{
        tagName: 'img',
        attributes: {
            src: 'https://www.highcharts.com/samples/graphics/stock-dark.svg'
        }
    }]
}

2. HTML 字符串

将HTML代码直接定义为标准HTML字符串。

代码示例：

js 复制代码

{
    type: 'HTML',
    renderTo: 'dashboard-1',
    html: '<img src="https://www.highcharts.com/samples/graphics/stock-dark.svg">'
}

以上示例 example 展示了定义HTML组件的两种不同方式。

自定义HTML组件的详细说明请参阅下方的"自定义组件Custom Component"章节。

完整信息请查阅HTML组件页面 HTML Component 。

Highcharts 图表组件

仪表板支持直接使用Highcharts图表或地图组件。

使用前必须按顺序导入相关模块：

html 复制代码

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

必须引入Highcharts CSS文件以确保正确渲染：

css 复制代码

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

要显示图表，必须设置type为Highcharts、配置renderTo选项，并通过chartOptions提供数据。chartOptions对象支持所有独立Highcharts图表的配置选项。

数据提供方式：可直接在图表选项中嵌入数据，但在仪表板应用中，通常需要在组件间共享数据。此时，数据池Data Pool 机制提供了便捷的解决方案。

示例：直接嵌入数据（不使用数据连接器）-嵌入数据在图表选项中的代码片段，没有使用数据连接器：

js 复制代码

{
    renderTo: 'dashboard-1',
    type: 'Highcharts',
    chartOptions: {
        series: [{
            data: [1, 2, 3, 4]
        }]
    }
}

上述代码片段是一个 Highcharts组件示例，它使用了嵌入式数据。

使用数据连接器机制

js 复制代码

dataPool: {
    connectors: [{
        id: 'micro-element',
        type: 'JSON',
        options: {
            firstRowAsNames: false,
            columnNames: ['Food', 'Vitamin A',  'Iron'],
            data: [
                ['Beef Liver', 6421, 6.5],
                ['Lamb Liver', 2122, 6.5],
                ['Cod Liver Oil', 1350, 0.9],
                ['Mackerel', 388, 1],
                ['Tuna', 214, 0.6]
            ]
        }
    }]
},
components: [
{
    renderTo: 'dashboard-col-0',
    type: 'Highcharts',
    connector: {
        id: 'micro-element',
        columnAssignment: [{
            seriesId: 'Vitamin A',
            data: ['Food', 'Vitamin A']
        }]
    }
}]

上述代码片段是一个 Highcharts 组件示例，它使用通过 DataConnector 共享的数据。

数据连接器说明：

使用数据连接器时，数据会被解析并按行组织，columnNames 要么被明确提供，要么在第一行用作列名。

然后，图表使用 columnAssignment 选项将特定列的值映射到图表的系列中。这里是一个使用列分配的示例 example。

交互功能：

如果连接了数据连接器，可加载Highcharts drag-drop 拖放模块，允许用户修改数值并同步到其他组件。

注意：若数据连接器应用了mathModifier ，图表编辑功能将被禁用。详情参见数据池dataPool 章节。

完整信息请查阅Highcharts组件页面 HighchartsComponent 。

网格组件 Grid Component

网格组件使用 Highcharts Grid 来渲染内容。Grid 模块必须在导入 Dashboards 模块之前导入，如下所示：

html 复制代码

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

Grid模块有自己的样式设置，因此必须导入CSS文件以确保正确渲染。

css 复制代码

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

要显示网格，必须指定类型Grid，设置 renderTo 选项，并提供作为嵌入 dataTable对象的数据，或者通过DataConnector提供。此外， gridOptions 对象允许你配置Grid的特定参数，比如单元格格式、列分配等。

Grid网格可能会将系列数据直接嵌入到 gridOptions 中。然而，更常见的用法是使用 Dashboards '仪表盘的数据池机制，该机制在仪表盘组件之间共享数据。在这种情况下， id 必须包含在DataConnector数据网格的配置中。

代码片段中嵌入了数据，使用了Grid 数据表；未使用数据连接器。

js 复制代码

{
    renderTo: 'dashboard-1',
    type: 'Grid',
    dataTable: {
        columns: {
            product: ['Apples', 'Pears', 'Plums', 'Bananas'],
            weight: [100, 40, 0.5, 200],
            price: [1.5, 2.53, 5, 4.5]
        }
    }
}

上述代码片段是一个网格示例Grid example的一部分，使用了嵌入式数据。

使用数据连接器的代码片段。

js 复制代码

dataPool: {
    connectors: [{
        id: 'data',
        type: 'JSON',
        options: {
            data: [
                ['Product Name', 'Quantity', 'Revenue', 'Category'],
                ['Laptop', 100, 2000, 'Electronics'],
                ['Smartphone', 150, 3300, 'Electronics'],
                ['Desk Chair', 120, 2160, 'Furniture'],
                ['Coffee Maker', 90, 1890, 'Appliances'],
                ['Headphones', 200, 3200, 'Electronics'],
                ['Dining Table', 130, 2470, 'Furniture'],
                ['Refrigerator', 170, 2890, 'Appliances']
            ]
        }
    }]
},
{
    type: 'Grid',
    renderTo: 'cell-id-2',
    connector: {
        id: 'data'
    }
}

上述代码片段是一个网格示例 Grid example 的一部分，使用了通过 DataConnector共享的数据。

使用数据连接器时， Grid i会自动填充。如果其他组件也在使用相同的数据连接器，当用户编辑数据网格中的单元格时，它们也会自动更新。这里有一个示例。

注意！如果数据是由数学修饰器mathModifier创建的，单元格编辑默认是禁用的。

有关更多信息，请参阅网格组件页面 Grid Component。

KPI 组件

KPI component（关键绩效指标）组件专为可视化数据集中的单个数值而设计。该组件简洁地显示标题和数值，也可集成Highcharts组件（通常为仪表图）进行可视化展示。支持配置阈值，使样式能根据当前数值动态调整。

依赖说明：此组件类型与Highcharts插件捆绑，使用前需确保Highcharts与仪表板插件正确连接（配置方式与Highcharts组件类似）。

代码片段：

js 复制代码

{
    renderTo: 'kpi-00',
    type: 'KPI',
    title: 'Average revenue',
    value: 888,
    threshold: [200, 800],
    thresholdColors: ['#f45b5b', '#f7a35c', '#90ed7d']
},

上述代码片段是一个关键绩效指标组件示例KPI component example的一部分。

阈值功能：

threshold : [200, 800] 定义两个阈值点（200和800）

thresholdColors 定义三个颜色区间：<200（红色）、200-800（橙色）、>800（绿色）

有关更多信息，请参阅关键绩效指标组件 KPI Component 页面。