Dashboards 集成 Highcharts 图标组件及数据连接使用说明

Highcharts 图表组件

Highcharts Component（ Highcharts 组件）允许最终用户在仪表盘中定义图表。 图表通常用于可视化变化的数据。

如何开启

我们需要按照以下顺序加载 JavaScript 和 CSS 文件以开始使用。

1.导入

要使用 Highcharts 组件，首先像往常一样加载 Highcharts ，然后加载 Dashboards 以将它们绑定在一起。

导入的顺序非常重要，因此请确保在导入 Highcharts 模块之后再导入 Dashboards 模块。

    <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 包。

    npm install highcharts

然后，导入包和专用插件以将其连接到仪表盘。

    import * as Highcharts from 'highcharts';
    import * as Dashboards from '@highcharts/dashboards';
    import LayoutModule from '@highcharts/dashboards/modules/layout';

    LayoutModule(Dashboards);

    Dashboards.HighchartsPlugin.custom.connectHighcharts(Highcharts);
    Dashboards.PluginHandler.addPlugin(Dashboards.HighchartsPlugin);

2. CSS

从版本 v3.0.0 开始，Highcharts 组件默认不使用 styledMode ，因此无需加载一整套 CSS 样式来正确显示 Highcharts。只导入 Dashboards 的 CSS 文件就足够了：

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

您可以随时通过将 styledMode 选项设置为true 来启用样式模式，并根据 Highcharts s样式指南 进行样式设置。

3.单元格标识符

在加载必要的文件后，使用唯一标识符定义一个单元格，例如 renderTo: 'dashboard-col-0'.

您可以在仪表盘的 这里 找到有关创建布局的更多信息。

4. 图表选项

在 chartOptions 对象中声明所有图表选项。 有关可用选项的完整列表，请参阅 Highcharts API

    chartOptions: {
        series: [{
            data: [1, 2, 3, 4]
        }]
    }

5. 图表类型

您只需在组件的配置中指定 type: 'Highcharts' 即可。

下面是完整示例。

Dashboards.board('container', {
    gui: {
        layouts: [{
            id: 'layout-1',
            rows: [{
                cells: [{
                    id: 'dashboard-col-0'
                }]
            }]
        }]
    },
    components: [{
        renderTo: 'dashboard-col-0',
        type: 'Highcharts',
        chartOptions: {
            series: [{
                data: [1, 2, 3, 4]
            }]
        }
    }]
});

处理数据

您可以定义静态数据，就像在基本的Highcharts图表中一样，或者使用 dataPool 连接一些动态数据。
示例.

如果数据连接器已连接，您可以加载 Highcharts 的 dragDrop 模块，允许用户更改数值并将这些更改与其他组件同步。此外，如果系列数据基于连接器中的列（由 mathModifier创建），默认情况下编辑功能是禁用的。您可以在dataPool 部分了解更多相关信息。

使用 数据连接器 DataConnector的示例。

Dashboards.board('container', {
    dataPool: {
        connectors: [{
            id: 'Vitamin',
            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-0'
                }]
            }]
        }]
    },
    components: [{
        renderTo: 'dashboard-col-0',
        type: 'Highcharts',
        connector: {
            id: 'Vitamin'
        },
        chartOptions: {
            title: {
                text: 'Example chart'
            }
        }
    }]
});

将列数据分配给系列数据

可以通过 columnAssignment 选项解析数据，将连接器中的正确值映射出来，以在系列中反映。你还可以声明哪些列将作为点的参数。这对于像OHLC、蜡烛图、列范围或排列等系列非常有用。seriesId字段是正确显示系列（例如在图例中）的必需项。 以下是示例Here。

data 选项可以接受三种不同的类型：

1. string 一维

包含一维数据的列名。

columnAssignment: [{
    seriesId: 'mySeriesId',
    data: 'myData'
}]

2. string[ ] 二维

Names of the columns that data will be used in the two-dimensional format.

columnAssignment: [{
    seriesId: 'mySeriesId',
    data: ['myX', 'myY']
}]

3. Record<string, string>

具有系列数据键名的键和将用于键定义的二维系列数据的列名的对象。

columnAssignment: [{
    seriesId: 'myStockSeriesId',
    data: {
        x: 'myX',
        open: 'myOpen',
        high: 'myHigh',
        low: 'myLow',
        close: 'myClose'
    },
}, {
    seriesId: 'myColumnSeriesId',
    data: {
        name: 'myNamesColumn',
        y: 'myYColumn',
        'dataLabels.style.visibility': 'myDataLabelVisibilityColumn'
    }
}]

多个连接器

The Highcharts Component also supports more than one data source. Therefore, the connector option must be configured as an array of objects rather than a single object.

Code sample:

components: [{
    type: 'Highcharts',
    connector: [{
        id: 'connector-1',
        columnAssignment: [ ... ]
    }, {
        id: 'connector-2',
        columnAssignment: [ ... ]
    }]
}]

组件同步

其中一个Highcharts组件的众多可用选项之一是sync 同步选项，它允许设置组件状态之间的同步。你可以在sync 同步文章中找到更多相关信息

同步可以是一个配置对象，包含： highlight, visibility , extremes，它们允许通过传递值true 或 false 来启用或禁用同步类型。

以下是sync 同步类型的演示：See demos of types below:

• Extremes Sync 极限同步
• Highlight Sync 高亮同步
• Visibility Sync 可见性同步

高亮同步选项

同步高亮可以有额外的选项：

sync: {
    highlight: {
        enabled: true,
        affectedSeriesId: 'series-1',
        highlightPoint: true,
        showTooltip: false,
        showCrosshair: true
    }
}

如果你想强制突出显示同步始终影响某个特定系列，可以在参数中使用 affectedSeriesId 选项，并指定该系列的ID。当未定义、为空或设置为null时，选项的分配将默认基于悬停的列和列的分配。

如果你想确定图表上重点显示的方式（即是否应为标记设置悬停状态，是否应同步十字光标，以及是否应显示工具提示），请使用 highlightPoint, showCrosshair 和 showTooltip 选项。详细内容请参阅 API 文档 API docs。

API 选项

有关所有可用选项的完整列表，请参阅 API.

Highcharts 兼容性

Highcharts 组件与版本10及以上的所有Highcharts模块兼容。