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

Question

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

虽然我已经找到了几个如何在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。

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