常见问题解答

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

首先，你必须创建 ‘DataPool’ 对象，定义一个连接器并传递数据引用。

关于这个主题的更多信息请参见 数据池部分DataPool
。

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

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

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

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

<script src="https://code.highcharts.com/dashboards/dashboards.js"></script>
<script src="https://code.highcharts.com/dashboards/modules/layout.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]}]
    },
}]

Here is the demo.

2. 禁用默认布局创建器

你可以为布局创建自己的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]}]
    },
}]

这里是 独立演示demo 和
Tailwind demo。

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

我们如何同步组件？

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

同步组件的示例

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'
        }
    }
}]

查看我们的简易仪表盘 dashboard demo中此同步功能的工作原理。 查看下一个问题，了解可能的同步事件。

Highcharts Dashboards仪表盘中有哪些同步事件？

查看我们的简易仪表盘 dashboard demo中此同步功能的工作原理。

‘可以在组件之间同步的事件包括：’

• 'visibility’ 可见性
• ‘extremes’ 极限
• ‘highlight’ 高亮

支持哪些浏览器？

Highcharts Dashboards 支持以下浏览器：

Browser 浏览器	Version 版本
Firefox	52.0+ (2017+)
Chrome	55.0+ (2016+)
Safari	11.0+ (2017+)
Opera	42.0+ (2016+)
Edge	16.0+ (2017+)

支持哪些版本的Highcharts？

Highcharts Dashboards兼容所有版本10及以上的Highcharts模块。

我修改了图表中的系列名称，现在同步功能不工作了。我该怎么办？

‘如果你修改了特定的系列属性，可能会导致与其他组件的同步失效。例如，在图表的afterRender事件回调中修改系列名称：’

afterRender(e) {
    // Potential problem: setting custom name for series
    e.target.chart.series[0].name = 'customName'
    e.target.chart.series[1].name = 'otherCustomName'
}

如何设置仪表盘的样式？

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

Dashboards 仪表盘为其所有组件应用默认主题。 你需要将默认的CSS样式表导入到你的项目中，以确保仪表盘正常显示。你可以通过导入以下CSS文件来实现：

@import url("https://code.highcharts.com/dashboards/css/dashboards.css");
@import url("https://code.highcharts.com/dashboards/css/datagrid.css");

但是，您可以通过添加自定义CSS样式表来自定义仪表盘的样式。关于这个主题的更多内容请参见 样式部分 Styling section 。

使用常规的CSS媒体查询来调整您的布局以适应不同的屏幕。

示例：

/* LARGE */
@media (max-width: 1200px) {
    #dashboard-cell-1 {
        flex: 1 1 33.333%;
    }
}

/* MEDIUM */
@media (max-width: 992px) {
    #dashboard-cell-1 {
        flex: 1 1 50%;
    }
}

/* SMALL */
@media (max-width: 576px) {
    #dashboard-cell-1 {
        flex: 1 1 100%;
    }
}

请注意，包含图表（Highcharts、关键绩效指标KPI）的每个组件默认使用 样式模式styledMode 来设置图表样式。需要导入CSS样式表，以确保Highcharts正常显示。 如果想自定义图表样式，可以创建自己的主题，或在我们的 文档docs 中添加自己的CSS变量或规则。

2. 禁用默认布局创建器（图形界面 GUI )

您可以创建自己用CSS或Tailwind样式化的布局的HTML结构。请记住，每个容器都应有一个唯一的 id 用于渲染的组件。

这里是 独立演示 demo和 Tailwind demo演示。

注意！禁用图形界面讲不允许您使用 编辑模式 模块。