如何将DataPool连接到其他组件？

如何将DataPool连接到其他组件？

首先，你必须创建DataPool对象，定义一个连接器并传递数据引用。关于这个主题的更多信息请参考数据池部分。

之后，你需要将连接器传递给组件配置，就完成了。

如何将组件连接到单元格？

1. 启用布局创建器（图形界面）

要使用带有布局系统和编辑模式的仪表盘，首先必须加载layout模块。 导入的顺序非常重要，所以请确保在导入仪表盘模块之后再导入layout模块。

<scriptsrc="https://code.highcharts.com/dashboards/dashboards.js"></script>

每个单元格都必须有一个id字段。相同的id必须传递给组件配置中的renderTo字段。组件和单元格的示例配置：

gui: { enabled: true, layouts: [{ id: 'layout-1', rows: [{ cells: [{ id: 'dashboard-col-0' }] }] }] }, components: [{ renderTo: 'dashboard-col-0', type: 'Highcharts', chartOptions: { chart: { type: 'pie' }, series: [{data: [1,2,3]}] }, }]

您可以为布局创建自己的HTML结构，使用CSS或其他CSS框架（例如Tailwind、Bootstrap）。 请记住，每个容器都应有一个唯一的id，用于渲染组件。

<div id="container"> <div> <div id="dashboard-col-0"></div> </div> </div>

gui: { enabled: false } components: [{ renderTo: 'dashboard-col-0', type: 'Highcharts', chartOptions: { chart: { type: 'pie' }, series: [{data: [1,2,3]}] }, }]

禁用的图形界面不允许你使用编辑模式模块。

我们如何同步组件？

要同步组件，你必须指定你想在每个组件之间同步的事件，并且它们必须使用相同的连接器。
同步组件的示例

components: [{ connector: { id: 'Vitamin' }, sync: { visibility: true, highlight: true, extremes: true }, renderTo: 'dashboard-col-0', type: 'Highcharts', chartOptions: { chart: { type: 'pie' } }, }, { renderTo: 'dashboard-col-1', connector: { id: 'Vitamin' }, sync: { visibility: true, highlight: true, extremes: true }, type: 'Highcharts', chartOptions: { xAxis: { type: 'category' }, chart: { animation: false, type: 'column' } } }]

查看我们的最简仪表盘演示中此同步功能的工作原理。