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

Question

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

虽然我已经找到了在Highcharts图表级别脚本中实现此目的的几个示例（例如此示例），但在每个图表中实现这些样式似乎过于重复，而我有大量受影响的图表。

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

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

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

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

我能否定义CSS样式，并通过其ID或CLASS将其传递给全局主题或图表集？

- akaimo

---

在你的 CSS 文件中，只需添加 #myButton{ 你的 CSS 调整 }。 - Hackerman

如果您需要更多控制按钮，那么创建自己的按钮如何？并将它们定位在 Highcharts 图表上。然后，您可以将单击事件绑定到单独的 chart.exportChart() 方法。请参见 API。 - Paweł Fus

感谢。在这种情况下，使用id（即#myButton）修改css文件无效。@PawełFus - 感谢您。如果没有其他建议，我可能会采用他的方法；如果可以的话，我更愿意使用库的固有定位，并根据需要对元素进行样式设置。 - akaimo

您想要更改什么？打开开发者工具并检查元素。您会发现Highcharts按钮是由title/rect/path/text标签组成的。您可以在CSS中获取现有的按钮，例如 $（“.highcharts-button：eq（7）”）->但数字7将取决于已创建的按钮数量（在您的演示中：1m，3m，6m，YTD，1y，All，exporting button= 7个项目，我们从0开始计数）。但是，设置CSS选项并不像您想象的那么容易。我只是提到了SVG，而不是VML :) - Paweł Fus

我可以使用这个开始工作，并且只使用可用的属性。我只是在检查是否有一种简单的方法来传递样式类，可能是我忽略了的，但目前似乎没有这样的方法。谢谢，我感谢您的建议。 - akaimo

Answer 1

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

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

- Buksy