网格组件（Grid Component）
**Highcharts Grid ** 网格组件 作为 Highcharts 网格 的包装器，可以放置在仪表盘的单元格中，方便用户以表格形式可视化数据。继续阅读以了解如何在 Highcharts 网格 中嵌入 Highcharts 仪表盘，或查看 Highcharts 网格 的完整文档。
重要通知：在 Dashboards 4.0.0 之前的版本中，Grid Pro 与 Dashboards 一起打包。了解更多关于迁移到最新版本的信息，请参阅我们的 迁移指南。
如何开始
1. 导入
要在 Dashboards 中将 Grid Pro * 作为组件使用，您需要导入所需的模块，grid-pro.js 和 dashboards.js，并将它们绑定在一起。
导入的顺序非常重要，请确保在导入 Grid 模块之后再导入 Dashboards 模块。
html
<script src="https://code.highcharts.com/dashboards/datagrid.js"></script>
<script src="https://code.highcharts.com/dashboards/dashboards.js"></script>或者，您也可以使用 NPM 包（参见：安装）并导入它们以连接到 Dashboards。
typescript
import * as Dashboards from '@highcharts/dashboards';
import * as Grid from '@highcharts/dashboards/datagrid';
Dashboards.GridPlugin.custom.connectGrid(Grid);
Dashboards.PluginHandler.addPlugin(Dashboards.GridPlugin);2. CSS：导入样式
您还必须在主 CSS 文件中导入样式。
css
@import url("https://code.highcharts.com/dashboards/css/dashboards.css");
@import url("https://code.highcharts.com/dashboards/css/datagrid.css");3. 定义一个单元格：标识符
在加载必要的文件后，使用一个唯一的标识符（例如 dashboard-col-0）定义一个单元格。这个单元格将用于在仪表盘中放置组件，网格的内容将在这里渲染。
js
gui: {
layouts: [{
id: 'layout-1',
rows: [{
cells: [{
id: 'dashboard-col-0'
}]
}]
}]
}4. 数据设置
您还需要一些数据来在网格中显示。为此，您可以，例如，定义一个包含 CSV 格式数据的连接器。
js
dataPool: {
connectors: [{
id: 'data',
type: 'CSV',
options: {
csv: `Food,Vitamin A,Iron
Beef Liver,6421,6.5
Lamb Liver,2122,6.5
Cod Liver Oil,1350,0.9
Mackerel,388,1
Tuna,214,0.6`
}
}]
}点击 这里 了解更多关于数据处理的信息。
5. 渲染
一旦你有了数据和组件的放置位置，就可以像下面这样定义它。
在renderTo 选项中，我们传递了单元格的ID（如上所述或在布局中创建的），以及在connector.id选项中带有数据的连接器ID（第4点）。为了让组件作为网格创建，需将type选项设置为'Grid'。
js
components: [{
renderTo: 'dashboard-col-1',
connector: {
id: 'data'
},
type: 'Grid'
}]若要查看更多关于网格组件的选项，请点击 here.
查看创建简单网格所需的简要 JavaScript 代码：
js
Dashboards.board('container', {
dataPool: {
connectors: [{
id: 'data',
type: 'CSV',
options: {
csv: `Food,Vitamin A,Iron
Beef Liver,6421,6.5
Lamb Liver,2122,6.5
Cod Liver Oil,1350,0.9
Mackerel,388,1
Tuna,214,0.6`
}
}]
},
gui: {
layouts: [{
id: 'layout-1',
rows: [{
cells: [{
id: 'dashboard-col-1'
}]
}]
}]
},
components: [{
renderTo: 'dashboard-col-1',
connector: {
id: 'data'
},
type: 'Grid'
}]
});网格选项
了解更多关于 网格文档 Grid documentation 的信息，或者使用 API 文档 查看网格组件的可用选项。
数据修改器
数据修饰符允许对提供给连接器的数据进行操作，以生成一个修改后的版本，例如在 Grid Component网格组件 中。
数据修改器有不同的类型：
Chain- 一系列按固定顺序执行的修饰器。Invert- 反转修饰器会反转显示行的顺序。Range- 范围修饰符允许根据特定列的数据范围选择要显示的行。Sort- 排序修饰符允许根据特定列中数据排序的结果来设置行的显示顺序。Math- 数学修饰符允许创建额外的列，这些列中的数据是从其他列经过数学变换得到的。
可以在连接器选项中使用 dataModifier 选项，示例如下：
js
connectors: [{
id: 'data',
type: 'CSV',
options: {
csv: `A,B
1,3
20,2
100,2`,
dataModifier: {
type: 'Math',
columnFormulas: [{
column: 'Sum',
formula: 'A1+B1'
}]
}
}
}]在这个例子中，创建了一个名为 Sum 的列，其数据是该行中前几列数字的总和。
请注意，使用相应的修饰符还需要导入模块。例如：
html
<script src="https://code.highcharts.com/dashboards/modules/math-modifier.js"></script>组件同步
Grid Component 网格组件的众多可用选项之一是sync 选项，它允许设置组件状态之间的同步。你可以在同步 sync 文章中找到更多相关信息。
同步可以是一个配置对象，包含： highlight, visibility 和 extremes,它们允许通过传递值 true 或 false 来启用或禁用同步类型。
以下 是sync 演示Demo:
高亮同步 Highlight sync 选项
亮同步功能适用于 网格组件，可以设置额外的选项：
Highlight sync for the Grid Component can have additional options:
js
sync: {
highlight: {
enabled: true,
autoScroll: true
}
}如果你希望自动滚动网格组件到高亮的行，请开启 autoScroll 选项。