Highcharts 数据表格升级与迁移指南｜仪表盘 4.0、Grid Lite 2.0 和 Grid Pro 2.0-深圳市維司達科技有限公司

数据表格升级指南与迁移指南：仪表盘 4.0、Grid Lite 2.0 和 Grid Pro 2.0

Grid Pro网格专业版（前称：DataGrid）（原名为数据网格）现在作为一个单独的包进行分发。在 Dashboards 4.0.0 之前的版本中，网格专业版与仪表盘捆绑在一起。

目前，Grid Pro是Highcharts仪表板的一部分，并将在Dashboardsv4发布后作为独立的库可用。

快速入门 - 关键变更

在深入详细的迁移指南之前，以下是最关键的重大变更：

Grid Pro（数据网格）现在是一个独立的包 - 必须单独安装和导入
列使用ID而非名称 - 更新所有getColumnNames( )为getColumnIds( )
组件必须使用renderTo- 已移除cell选项
用getData( )替换getJSON( )- 适用于Grid Lite和Grid Pro用户
连接器选项已扁平化 - 将嵌套的options内容移动到顶层
table.modified现在是table.getModified ()- 属性已被方法取代
.highcharts-datagrid-现在是.hcg-- 替换CSS覆盖中的所有出现位置

概述

这份指南涵盖升级到以下版本时的重大变更：

产品	自	到
Dashboards 仪表板	3.6.0	4.0.0
Grid Lite 网格简易版	1.4.0	2.0.0
Grid Pro (DataGrid)网格专业版（数据网格）	与仪表盘捆绑）	版本 2.0.0（独立版本）

影响范围

仪表盘 + 网格专业版用户：请按照第1、2和4节操作
仅使用仪表盘的用户：请按照第1和2节操作
网格简易版用户：请遵循第1和第3节
独立使用网格专业版的用户：请按照第1和4节操作

1. 数据层重大变更

这些变更适用于数据层（无论是独立使用还是在仪表盘中）的用户。（不使用数据层的仅使用网格的用户可以跳过此部分）

列标识符：名称 → ID

变更内容：所有列引用现在都使用ID而非名称。

Migration steps:迁移步骤：

用getColumnIds( )替换getColumnNames( )
更新使用columnName的事件处理程序为使用columnId或columnIds
将任何对table.columns进行迭代的代码改为使用 ID

示例：

// Beforeconstnames=table.getColumnNames();table.on('afterSetColumns',(e)=>{console.log(e.columnName);});// Afterconstids=table.getColumnIds();table.on('afterSetColumns',(e)=>{console.log(e.columnIds);});

DataTable.已修改属性

发生了什么变化：要获取已修改的表格，请使用getModified( )方法。虽然旧的modified属性仍然可用，但在表格未被修改的情况下，它不会被定义（在这种情况下，getModified( )方法会返回对原始未修改表格的引用）。

迁移步骤：

如果你想保持旧的功能方式，将table.modified替换为table.getModified( )
删除对DataTable.NULL和DataTable.isNull( )的引用（都已删除）
使用空对象检查而不是null行助手
注意：当表未被修改时，它不再定义modified字段。在这种情况下，getModified( )返回表本身的引用。

示例：

// BeforeconstmodifiedData=table.modified;// AfterconstmodifiedData=table.getModified();

数据连接器选项扁平化

连接器配置不再将选项嵌套在子对象中。

迁移步骤：

将嵌套的options内容移到顶层
更新dataTables数组格式

示例：

// BeforedataPool:{connectors:[{id:'my-connector',type:'CSV',options:{csv:`Product,Price Apples,1.5 Oranges,2.0`,// ... other options},dataTables:[{key:'myTable'// ... table options}]}]}// AfterdataPool:{connectors:[{id:'my-connector',type:'CSV',csv:`Product,Price Apples,1.5 Oranges,2.0`,// ... other optionsdataTables:[{key:'myTable'// ... table options}]}]}

数据连接器API变更

发生了什么变化：几个属性和方法被移除或重命名。连接器事件现在只暴露外部负载。内部对象，例如解析后的 DataTable 实例，不再包含在内（e.tables）—可以从连接器本身（connector.getTable()，connector.dataTables）获取它们。

迁移步骤：

用 connector.getTable( ) 替换 connector.table
移除对connector.save( )和connector.whatIs()的调用（已删除）
移除事件中对e.tables的使用

常见错误：如果你看到connector.table is undefined，请将其替换为connector.getTable( )。

数据修改器简化

变化内容：增量修改钩子已被移除。

迁移步骤：

将所有修改器逻辑合并到modifyTable( )方法中
移除modifyRows( )、modifyColumns( )和modifyCell( )的实现
确保modifyTable( )返回已修改的表格

数据转换器更新

变化内容：辅助方法已迁移到DataConverterUtils，类型猜测API发生了变化，且自定义转换器现在必须返回列集合而非DataTable。

迁移步骤：

重命名助手用法

converter.asGuessedType(value) → converter.convertByType(value)
使用 DataConverterUtils 命名空间中的助手（例如 DataConverterUtils.trim( )、DataConverterUtils.asNumber( )）

更新自定义连接器/转换器

DataConverter.getTable( ) 已被移除
DataTable as an argumentDataConnector.CreateConverterFunction 不再接受 DataTable 作为参数

代码示例：

之前（3.6）：

constconverter=newCustomConverter(table);converter.parse(payload);table.setColumns(converter.getTable().getColumns());

之前（4.0）：

constconverter=newCustomConverter();constcolumns=converter.parse(payload);// returns DataTable.ColumnCollectiontable.setColumns(columns);

常见错误：如果你看到converter.getTable不是function函数，你需要更新你的转换器，使其直接返回列。

2. 仪表盘 4.0 重大变更

组件渲染

变化内容：已移除已弃用的 cell 选项；组件必须使用 renderTo

迁移步骤：

将所有 cell 选项替换为 renderTo
更新组件配置以明确指定渲染目标
移除任何依赖隐式单元格回退的代码

示例：

// Beforecomponent:{type:'Highcharts',cell:'chart-cell'}// Aftercomponent:{type:'Highcharts',renderTo:'chart-cell'}

常见错误：如果你的组件无法渲染或看到 cell is not a valid option，请将 cell 替换为 renderTo

列分配给组件

变化内容：已移除已弃用的 components[ ].columnAssignment 选项

迁移步骤：

将任何组件级别的列分配移动到 components[].connector.columnAssignment
连接器级别的 columnAssignment 选项保持可用且不变

注意：这只影响已弃用的组件级别选项。常用的 components[ ].connector.columnAssignment 仍然完全支持。

示例：

// Before (deprecated)component:{type:'Highcharts',columnAssignment:{// ... mappings}}// After (use connector-level option)component:{type:'Highcharts',connector:{columnAssignment:{// ... mappings}}}

常见错误：如果看到 columnAssignment is not recognized at component level，请将其移到 connector.columnAssignment。

组件-连接器集成

变化内容：连接器加载事件和表访问模式发生了变化。

迁移步骤：

移除连接器加载事件中 e.tables 的监听器
‘使用组件事件：component.emit({ type: ‘tableChanged’ })’
通过connector.getTable().getModified( )访问表格
在修补连接器表时使用 DataConverterUtils 辅助工具

3. Grid Lite 2.0.0 重大变更

列宽调整 API

变化内容： ColumnDistribution 被 ColumnResizing 取代，并引入新的模式系统。

迁移步骤：

用 Highcharts.DataGrid.ColumnResizing 替换 Highcharts.DataGrid.ColumnDistribution
将rendering.columns.distribution更新为rendering.columns.resizing.mode
“将旧值映射到新模式：”
- fixed → distributed（仅更新拖动的列）
- mixed → adjacent（调整列宽及其邻近列的大小）
- full → 没有直接对应的等价物（宽度不再以共享百分比的形式维护）
建议：使用 adjacent 或 distributed 模式，并删除任何 CSS 列宽设置，因为列宽现在由 JavaScript 完全管理

示例：

// Before (old 'mixed' strategy)gridOptions:{rendering:{columns:{distribution:'mixed'}}}// AftergridOptions:{rendering:{columns:{resizing:{mode:'adjacent'}}}}

常见错误：如果你看到distribution is not a valid option，请将其替换为resizing.mode。

表格数据导出

变化内容： getJSON() 被删除；getData() 签名发生了变化。

迁移步骤：

将所有grid.getJSON()调用替换为grid.getData()
需要原始/未修改的表格数据时使用 grid.getData(false)
使用 grid.getData(true)（或 grid.getData()）表示格式化的 JSON（默认）

示例：

// Beforeconstdata=grid.getJSON();// Afterconstdata=grid.getData();// formatted by defaultconstrawData=grid.getData(false);// unmodified

常见错误：如果你看到grid.getJSON is not a function，请将其替换为grid.getData()。

4. Grid Pro 2.0 重大变更

独立包安装

变化内容： Grid Pro 现在作为单独的包分发。

迁移步骤：

** 对于独立的 Grid Pro 用户：**

安装 Grid Pro

npm install @highcharts/grid-pro

在你的项目中导入

选项A - ESM（推荐用于现代打包工具）：

import Grid from '@highcharts/grid-pro/es-modules/masters/grid-pro.src.js'; import '@highcharts/grid-pro/css/grid-pro.css';

选项B - 脚本标签（适用于浏览器）：

<script src="https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/grid-pro.js"></script><link rel="stylesheet"href="https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/css/grid-pro.css">

选项C - CommonJS：

constGrid=require('@highcharts/grid-pro');require('@highcharts/grid-pro/css/grid-pro.css');

** 针对仪表盘和网格专业版用户：**

安装两个包：

npm install @highcharts/dashboards @highcharts/grid-pro

在仪表盘之前导入网格专业版：

选项A - ESM（推荐用于现代打包工具）：

importGridfrom'@highcharts/grid-pro/es-modules/masters/grid-pro.src.js';import'@highcharts/grid-pro/css/grid-pro.css';importDashboardsfrom'@highcharts/dashboards/es-modules/masters/dashboards.src.js';import'@highcharts/dashboards/css/dashboards.css';// Connect Grid Pro to DashboardsDashboards.GridPlugin.custom.connectGrid(Grid);Dashboards.PluginHandler.addPlugin(Dashboards.GridPlugin);

选项B - 脚本标签（适用于浏览器）：

<scriptsrc="https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/grid-pro.js"></script><scriptsrc="https://code.highcharts.com/dashboards/dashboards.js"></script><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/css/grid-pro.css"><linkrel="stylesheet"href="https://code.highcharts.com/dashboards/css/dashboards.css">

选项C - CommonJS：

constGrid=require('@highcharts/grid-pro');require('@highcharts/grid-pro/css/grid-pro.css');constDashboards=require('@highcharts/dashboards');require('@highcharts/dashboards/css/dashboards.css');// Connect Grid Pro to DashboardsDashboards.GridPlugin.custom.connectGrid(Grid);Dashboards.PluginHandler.addPlugin(Dashboards.GridPlugin);

重要说明：

必须在仪表盘之前导入/加载网格专业版
使用脚本标签时，Grid Pro 从 jsDelivr CDN 提供 (cdn.jsdelivr.net)，而仪表盘则从 code.highcharts.com 提供
Grid Pro 的 CSS 包含所有 Grid Lite 样式，因此你只需引入 Grid Pro 的 CSS（无需引入 Grid Lite CSS）

常见错误：如果你看到 DataGrid is not defined 或者 Grid Pro 的功能无法正常工作，请确保在 Dashboards 之前已安装并导入 Grid Pro。

新的CSS前缀

变化内容： Grid Pro 的 CSS 类前缀现在是 .hcg-。

迁移步骤：

在任何自定义样式覆盖中，将所有 .highcharts-datagrid- 替换为 .hcg-。
‘建议：使用主题变量代替 CSS 覆盖。’

示例：

// Before.highcharts-datagrid-row-even{background:#ccc;}// After.hcg-row-even{background:#ccc;}// Recommended--hcg-row-even-background:#ccc;

其他重大变更

Grid Pro 2.0.0 包含与 Grid Lite 2.0.0 相同的重大变更：

列宽调整 API - 见第 3 节
网格数据导出 - 见第 3 节

迁移清单

请使用此清单确保迁移完整：

适用于数据层用户（独立使用或配合仪表盘使用）

将所有列名引用更新为列ID
将 table.modified 替换为 table.getModified( )
扁平化连接器选项（移除嵌套的options对象）
更新连接器API调用（connector.table → connector.getTable( )）
将修饰符逻辑合并到modifyTable( )中
将DataConverter助手引用更新为DataConverterUtils命名空间

面向仪表盘用户

在所有组件中用renderTo替换cell
将已弃用的 components[ ].columnAssignment 移动到 components[ ].connector.columnAssignment
更新连接器事件监听器（移除e.tables引用）

面向 Grid Lite 用户

更新列调整大小的API和配置
将 getJSON() 替换为 getData()
将 grid.css 替换为 grid-lite.css

面向 Grid Pro 用户

将 Grid Pro 作为单独的包安装
导入Grid Pro（在使用仪表盘之前）
包含网格专业版CSS（包含所有网格轻量版样式）
更改 CSS 类前缀
应用所有 Grid Lite 迁移步骤

需要帮助

文档: [highcharts.com/docs]

社区: forum.highcharts.com

API参考

Highcharts 数据表格升级与迁移指南｜仪表盘 4.0、Grid Lite 2.0 和 Grid Pro 2.0

数据表格升级指南与迁移指南：仪表盘 4.0、Grid Lite 2.0 和 Grid Pro 2.0

快速入门 - 关键变更

概述

影响范围

1. 数据层重大变更

列标识符：名称 → ID

DataTable.已修改属性

数据连接器选项扁平化

数据连接器API变更

数据修改器简化

数据转换器更新

2. 仪表盘 4.0 重大变更

组件渲染

列分配给组件

组件-连接器集成

3. Grid Lite 2.0.0 重大变更

列宽调整 API

表格数据导出

4. Grid Pro 2.0 重大变更

独立包安装

新的CSS前缀

其他重大变更

迁移清单

适用于数据层用户（独立使用或配合仪表盘使用）

面向仪表盘用户

面向 Grid Lite 用户

面向 Grid Pro 用户

需要帮助

推荐阅读

GitHub Pages搭建个人博客展示TensorFlow项目成果

TikTok算法下的流量密码：如何让带货内容与直播被更多人看见

清华源镜像对比其他国内站点下载速度实测

GPT-SoVITS语音合成全流程指南

2026年AI人才争夺战：岗位需求激增，薪资飙升，大厂与巨头争相抢夺AI精英！

2025年AI CRM系统终极拷问：谁主沉浮？

数据表格升级指南 与 迁移指南：仪表盘 4.0、Grid Lite 2.0 和 Grid Pro 2.0

快速入门 - 关键变更

概述

影响范围

1. 数据层重大变更

列标识符：名称 → ID

DataTable.已修改 属性

数据连接器选项扁平化

数据连接器API变更

数据修改器简化

数据转换器更新

2. 仪表盘 4.0 重大变更

组件渲染

列分配给组件

组件-连接器集成

3. Grid Lite 2.0.0 重大变更

列宽调整 API

表格数据导出

4. Grid Pro 2.0 重大变更

独立包安装

新的CSS前缀

其他重大变更

迁移清单

适用于数据层用户（独立使用或配合仪表盘使用）

面向仪表盘用户

面向 Grid Lite 用户

面向 Grid Pro 用户

需要帮助

推荐阅读

GitHub Pages搭建个人博客展示TensorFlow项目成果

TikTok算法下的流量密码：如何让带货内容与直播被更多人看见

清华源镜像对比其他国内站点下载速度实测

GPT-SoVITS语音合成全流程指南

2026年AI人才争夺战：岗位需求激增，薪资飙升，大厂与巨头争相抢夺AI精英！

2025年AI CRM系统终极拷问：谁主沉浮？

数据表格升级指南与迁移指南：仪表盘 4.0、Grid Lite 2.0 和 Grid Pro 2.0

DataTable.已修改属性