Highcharts Dashboards 官方文档｜如何创建第一个看板

这份文档说明了如何在网页中添加一个基本的 Highcharts 看板（仪表盘）。

创建仪表盘

当你准备好创建你的第一个简单仪表盘时，请按照以下步骤操作：

1. 添加一个 div 元素

创建仪表盘的第一个必要步骤是定义一个 div 元素，用于渲染仪表盘。 id 中的 div i标识符是由管理仪表盘的脚本所需要的。这个 div i通常被称为Dashboards仪表盘容器。

<div id="container">

2. 创建仪表盘

在这个例子中，我们将创建一个包含两个单元格的简单仪表盘。第一个单元格包含一些静态HTML static HTML ，而第二个单元格包含一个Highcharts图表。为了让这个仪表盘正常工作，我们需要同时引入Highcharts库和仪表盘库，以及layout 模块。所需的JavaScript模块如下导入：

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/dashboards/dashboards.js"></script>
<script src="https://code.highcharts.com/dashboards/modules/layout.js"></script>

不过，还有其他方法可以导入仪表盘包。对于替代方案，例如通过npm安装，请参阅 仪表盘安装.

3. 添加 CSS

我们需要CSS样式来正确显示仪表盘。仪表盘的默认样式包含在仪表盘的CSS文件中，并如下所示导入。

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

4. 添加脚本

现在我们已经准备好开始配置实际的仪表盘了。在script 标签内创建一个新的仪表盘实例。

要做到这一点，你必须传递两个参数：

• 仪表盘应放置的容器div的ID（见第一点）
• 仪表盘选项的对象。

要实现这一点，你可以使用工厂函数 Dashboards.board:

Dashboards.board('container', {...})

或者使用类 Dashboards.Board 来创建一个新的仪表盘实例：

const board = new Dashboards.Board('container', {...})

5. 添加必填选项

要让仪表盘正常工作，必须满足两个条件：

gui 这是一个用于定义仪表盘布局的对象，通过指定行和单元格

gui: {
    layouts: [{
        id: 'layout-1',
        rows: [{
            cells: [{
                id: 'dashboard-col-0'
            }, {
                id: 'dashboard-col-1'
            }]
        }]
    }]
}

components （组件） 这是一个要插入到仪表盘中的组件数组。要将组件放入某个单元格，请使用在 gui 选项中定义的单元格ID。 你还需要声明组件的类型及其选项。

components: [{
    type: 'HTML',
    renderTo: 'dashboard-col-0',
    elements: [
        {
            tagName: 'h1',
            textContent: 'Your first dashboard'
        }
    ]
}, {
    renderTo: 'dashboard-col-1',
    type: 'Highcharts',
    chartOptions: {
        series: [{
            data: [1, 2, 3, 4]
        }]
    }
}]

查看结果

通过上述配置，你的仪表盘应该看起来像这样：