Highcharts 仪表板编辑器 Dashboards介绍

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

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

1. Highcharts Dashboards

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

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

2. 黑科技一：告别 CSS 的"布局引擎" (Layout Engine)

这是 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' } // 第四个单元格
  ]
  }]
  }];

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

3. 黑科技二：万物皆"组件" (Component)

驾驶舱不只有图表，还需要数据表格、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 (数据表格) 都是统一的组件，管理变得异常简单。

4. 黑科技三：内置"数据连接器" (Data Connectors)

这是 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 解决方案"。

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