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

Question

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

尽管我已经找到了几个例子来说明如何在Highcharts图表级脚本（即本示例）的范围内实现这一点，但在每个图表中实现这些样式似乎相当重复，因为我知道我有一大群人会受到影响。

我意识到在Highcharts中使用全局主题可能会实现这一点，但我仍然受到库本身配置选项的限制。

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

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

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

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

Answer 1

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

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