网格组件（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 模块。
<scriptsrc="https://code.highcharts.com/dashboards/datagrid.js"></script><scriptsrc="https://code.highcharts.com/dashboards/dashboards.js"></script>或者，您也可以使用 NPM 包（参见：安装）并导入它们以连接到 Dashboards。
import*asDashboardsfrom'@highcharts/dashboards';import*asGridfrom'@highcharts/dashboards/datagrid';Dashboards.GridPlugin.custom.connectGrid(Grid);Dashboards.PluginHandler.addPlugin(Dashboards.GridPlugin);2. CSS：导入样式
您还必须在主 CSS 文件中导入样式。
@importurl("https://code.highcharts.com/dashboards/css/dashboards.css");@importurl("https://code.highcharts.com/dashboards/css/datagrid.css");3. 定义一个单元格：标识符
在加载必要的文件后，使用一个唯一的标识符（例如 dashboard-col-0）定义一个单元格。这个单元格将用于在仪表盘中放置组件，网格的内容将在这里渲染。
gui:{layouts:[{id:'layout-1',rows:[{cells:[{id:'dashboard-col-0'}]}]}]}4. 数据设置
您还需要一些数据来在网格中显示。为此，您可以，例如，定义一个包含 CSV 格式数据的连接器。
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’。
components:[{renderTo:'dashboard-col-1',connector:{id:'data'},type:'Grid'}]若要查看更多关于网格组件的选项，请点击 here.
查看创建简单网格所需的简要 JavaScript 代码：
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选项，示例如下：
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的列，其数据是该行中前几列数字的总和。
请注意，使用相应的修饰符还需要导入模块。例如：
<scriptsrc="https://code.highcharts.com/dashboards/modules/math-modifier.js"></script>组件同步
Grid Component网格组件的众多可用选项之一是sync选项，它允许设置组件状态之间的同步。你可以在同步 sync 文章中找到更多相关信息。
演示
同步可以是一个配置对象，包含：highlight,visibility和extremes,它们允许通过传递值 true 或 false 来启用或禁用同步类型。
以下 是sync演示Demo:
- Extremes Sync 极限同步
- Highlight Sync 高亮同步
- Visibility Sync 可见性同步
高亮同步 Highlight sync 选项
亮同步功能适用于 网格组件，可以设置额外的选项：
Highlight sync for theGrid Componentcan have additional options:
sync:{highlight:{enabled:true,autoScroll:true}}如果你希望自动滚动网格组件到高亮的行，请开启autoScroll选项。
Demo:
