javascript - Highcharts 使用 css 类将自定义样式应用于上下文按钮

Question

我有一大组 Highcharts 图形，它们都使用 exporting.js 库以各种格式下载。我想自定义这些图表上的上下文按钮以匹配应用程序的 native 样式。

虽然我已经找到了几个如何在 Highcharts 图表级脚本(即 THIS EXAMPLE)的范围内实现这一点的示例，但在每个图表中实现这些样式似乎相当重复，因为我知道我有一大堆要受影响。

我意识到这可以通过使用 Highcharts 中的全局主题来实现，但是我仍然受到库本身配置选项的限制。

例如，这将是建议的路径:

var chartingOptions = {
exporting: {
    buttons: {
        'myButton': {
            id: 'myButton',
            symbol: 'circle',
            x: -62,
            symbolFill: '#B5C9DF',
            hoverSymbolFill: '#779ABF'
        }
    }
}

但不幸的是，它并没有提供很多表现力。

我能否定义一个 css 样式并使用其ID 或CLASS 以某种方式将其传递给全局主题或图表集？

Answer 1

是的，您可以使用theme 设置按钮的class 或id属性(property)。

buttons: {
    'myButton': {
        symbol: 'circle',
        symbolFill: '#B5C9DF',
        hoverSymbolFill: '#779ABF',
        theme: {
            class: "myButton highcharts-button highcharts-button-normal",
            id: "myDiamondButton"
        }
    }
}