企业官网建设流程全解析

在前期的文章中，我们分享了用 Highcharts Dashboards 的布局引擎（Layout）、组件（Component）和数据池（DataPool）来“搭建”一个静态驾驶舱。但一个静态的驾驶舱是没有灵魂的。

传统的联动是怎么做的？我们监听A图表的click事件，然后手动调用 B 图表的chartInstance.series[0].update(...)。

这种方式在组件少的时候还行，一旦组件超过 5 个，联动的逻辑会变成一团“意大利面条”！

Highcharts Dashboards 彻底解决了这个问题。它的核心理念是：

组件之间不直接通信。所有组件只和“数据池（DataPool）”通信。

今天，我们就来实战这个“架构级”的联动。

核心武器：DataModifier (数据修饰器)

在 Highcharts Dashboards 中，DataModifier 用于在 DataTable 上转换或筛选数据，常通过 dataPool 中的 DataConnector 配置。它保留原始数据，并提供修改后的数据视图，便于组件使用一致、适合展示的数据。DataModifier 可用于数据预处理，但组件间的同步联动通常由共享 Connector 和sync配置实现。

• DataModifier 负责转换或筛选数据，例如排序、过滤、生成计算列。
• 组件联动通常由共享 DataConnector 和sync配置实现；Modifier 可以先整理共享数据，但不是联动机制本身。
• Modifier 保留原始数据，修改后的数据可通过DataTable.getModified()获取。每个 DataTable 可配置一个 modifier；需要组合操作时，用Chain串联多个 modifier。

主要特点：

1. 每个表只能有一个修饰器：每个DataTable只能有一个修饰器，但该修饰器可以调用其他修饰器。

2. 克隆可用性：如果DataModifier修改了DataTable，则可以通过DataTable.getModified()方法访问修改后的数据。

3. 修饰器类型：

   • Chain：组合多个修饰器。
   • Filter：根据指定条件过滤数据。
   • Invert：翻转行和列。
   • Math：执行复杂计算。
   • Range：限制数据在特定范围内。
   • Sort：根据指定字段排序数据。

最常用的修饰器就是Filter(过滤器)。

Highcharts Dashboards 的联动机制，是“状态管理”的思维，而不是“DOM 操作”的思维。

• 解耦 (Decoupling)：“按钮”（KPI）和“图表”完全解耦，它们都只依赖“数据池”。

• 可维护性 (Maintainable)：无论驾驶舱有多复杂，数据流向永远是清晰的（组件事件 -> DataPool -> 依赖组件）。

文章参考：Data Modifiers · Data Handling