Highcharts 仪表板编辑器 Dashboards介绍

为什么我们还在用"石器时代"的方法造"航母"？

今天来看看 Highcharts 的官方解决方案，一个专门为构建专业驾驶舱而生的利器：Highcharts Dashboards。

Highcharts Dashboards 是一个独立的、或与 Highcharts 集成 的库。它不是一个图表库，而是一个"驾驶舱构建引擎"。

它的核心思想是：用 JSON 配置来定义布局和组件，而不是手写 HTML 和 CSS。

这是 Highcharts Dashboards 最强大的功能。它提供了一个基于网格（Grid）的布局系统。

痛点： 手写 CSS Grid 布局，grid-template-columns 和 grid-row-start/end 难以管理。
Dashboards 解决方案： 用 gui.layouts JSON 对象来定义布局。

// 示例：定义一个经典的 2x2 布局
GUI.Dashboard.layout.config.layouts = [{
id: 'main-layout', // 布局 ID
rows: [{ // 定义第一行
cells: [
{ id: 'cell-kpi-1' }, // 第一个单元格
{ id: 'cell-kpi-2' } // 第二个单元格
]
}, { // 定义第二行
cells: [
{ id: 'cell-main-chart' }, // 第三个单元格
{ id: 'cell-pie-chart' } // 第四个单元格
]
}]
}];

价值： 布局定义与业务逻辑分离，极度清晰，且天生支持响应式。

驾驶舱不只有图表，还需要数据表格、KPI 指标卡、甚至自定义 HTML。

痛点： 图表是 Highcharts，表格用 AntD，KPI 卡自己写... 数据难以统一管理。
Dashboards 解决方案： 提供了统一的"组件" (Component)概念。

// 定义组件并将其"挂载"到单元格
Dashboards.board('container', {
gui: { layout: 'main-layout' },
components: [
{ // 挂载到第一个单元格
cell: 'cell-kpi-1',
type: 'KPI', // 使用内置的 KPI 组件
value: 999
},
{ // 挂载到第三个单元格
cell: 'cell-main-chart',
type: 'Highcharts', // 使用 Highcharts 组件
chartOptions: { ... } // 这里才是我们熟悉的图表 Options
},
{ // 挂载到第四个单元格
cell: 'cell-pie-chart',
type: 'Highcharts',
chartOptions: { ... }
}
]
});

价值： KPI、Highcharts、DataGrid (数据表格) 都是统一的组件，管理变得异常简单。

这是 Highcharts Dashboards 的**"灵魂"。它负责获取数据，并能自动同步**给所有使用该数据的组件。

痛点： 多个图表使用同一份数据源，需要手动管理数据请求和分发。
Dashboards 解决方案： 使用 dataPool 和 connectors。

Dashboards.board('container', {
// 1. 定义数据池 (Data Pool)
dataPool: {
connectors: [{
id: 'sales-data-connector', // 数据连接器 ID
type: 'JSON', // 数据类型
options: {
url: './sales-data.json' // 数据源地址
}
}]
},
// ...
components: [{
cell: 'cell-main-chart',
type: 'Highcharts',
// 2. 组件自动连接到数据池
connector: { id: 'sales-data-connector' },
// ... (图表配置)
}]
});

价值： 数据获取与组件渲染解耦。当 sales-data.json 更新时，所有连接到它的组件都会自动更新 ，无需你写任何 chart.update() 代码！

Highcharts Dashboards 的出现，是将 Highcharts 从"图表工具"提升到了"BI 解决方案"。

它通过布局引擎、组件化、数据池 这三大黑科技，彻底解决了手撸驾驶舱的效率、维护和性能问题。