不可回避了一个最棘手、最现实的问题：数据源。

在理想世界中，后端会给我们完美的 JSON。但在现实中，数据源可能是：

• 运营同学导出的一个 sales.csv 文件。

• 某个老旧系统页面上的一个 HTML <table>。

• 一个格式诡异的 API 接口。

以往，我们（前端开发者）不得不花费 50% 的时间去写数据预处理逻辑：fetch -> response.text() -> split('\n') -> split(',') -> parseFloat()...

今天，我将为你揭秘 Highcharts Dashboards 的数据连接器 (Data Connectors)，它将彻底终结这种“脏活累活”。

1. 数据连接器 (Data Connectors)

Data Connectors 是 Highcharts Dashboards DataPool (数据池) 的“取水管”。它内置了多种解析器，负责从不同来源**获取（Fetch）和解析（Parse）**数据，然后将其转换为标准的数据表（DataTable）存入数据池。

2. 效率神器：CSVConnector (CSV 解析器)

这是 Highcharts Dashboards 最实用的连接器之一。

• 痛点： 手动解析 CSV 文件，需要处理逗号、换行、表头、以及数据类型转换（"123" -> 123）。

• Dashboards 解决方案： type: 'CSV'。

你只需要一行配置，它会自动帮你完成：

1. 发起 HTTP 请求获取 products.csv。

2. 解析 CSV 格式。

3. 自动识别表头 (Header) 作为列名。

4. 自动进行类型转换（数字字符串转为 Number）。

Dashboards.board('container', {
    dataPool: {
        connectors: [{
            id: 'product-sales',
            type: 'CSV', // 告诉 Dashboards 这是 CSV
            options: {
                // 仅需提供 URL
                csvURL: './data/products.csv', 
                
                // (可选) 如果 CSV 没有表头，可以手动定义
                // firstRowAsNames: false,
                // dataMapping: { ... } 
            }
        }]
    },
    components: [{
        cell: 'chart-1',
        type: 'Highcharts',
        connector: {
            id: 'product-sales' // 直接使用解析好的数据
        },
        // ... chartOptions ...
    }]
});

价值： 告别 split(',')，CSV 导入一键完成。

3. 黑魔法：HTMLConnector (HTML 表格解析器)

这是最令人惊艳的“黑魔法”。

• 痛点： 你的驾驶舱需要和某个老旧系统（如 OA、ERP）放在同一个页面上，而那个老系统只提供了一个带 id 的 HTML <table> 来展示数据。

• Dashboards 解决方案： type: 'HTML'。

它允许你直接从当前页面的 HTML 表格中“刮取”数据来驱动图表。

// 假设你的页面上有这样一个表格:
// <table id="revenue-table">
//   <thead><tr><th>月份</th><th>收入</th></tr></thead>
//   <tbody><tr><td>一月</td><td>1000</td></tr></tbody>
// </table>

Dashboards.board('container', {
    dataPool: {
        connectors: [{
            id: 'revenue-data',
            type: 'HTML', // 告诉 Dashboards 这是 HTML
            options: {
                //【核心】提供表格的 CSS 选择器
                table: '#revenue-table' 
            }
        }]
    },
    components: [{
        cell: 'chart-2',
        type: 'Highcharts',
        connector: {
            id: 'revenue-data' // 直接使用刮取到的数据
        },
        // ... chartOptions ...
    }]
});

价值： 逆天功能！无需重构老系统，无需后端 API 支持，直接在前端实现老旧数据的“可视化激活”。

4. 高阶：DataConnector 的“事件钩子”

DataConnector 还提供了类似 load、afterLoad 的事件钩子，允许你在数据存入 DataPool 之前，进行最后的“清洗”或“转换”。

options: {
    csvURL: '...',
    // 在数据加载后，存入 DataPool 之前触发
    afterLoad: (e) => {
        // e.data.table 是解析后的数据表
        // 可以在这里对数据进行最后加工
        // 比如：增加一列、转换单位等
    }
}

总结：Dashboards = 布局 + 联动 + 数据 ETL

Highcharts Dashboards 的野心远不止“布局”。

通过 Data Connectors，它实际上为你提供了一个轻量级的前端 ETL (数据抽取、转换、加载) 工具。

• JSONConnector 负责标准数据。

• CSVConnector 负责文件数据。

• HTMLConnector 负责遗留系统数据。

这套“组合拳”将开发者从繁琐的数据解析中彻底解放，让我们能 100% 专注于数据联动和业务洞察。