更改drillUpButton文本的字体颜色

Question

我想知道如何更改rillUpButton text 的字体颜色。 我尝试使用 css 来提取元素，例如： g.highcharts-button highcharts-drillup-button highcharts-button-normal text{color: blue;} 但是它不起作用。 按钮图片

rillUpButton API 只提供了如何更改按钮本身的主题，与文本无关。

drillUpButton: {
        relativeTo: 'spacingBox',
        position: {
            y: 10,
            x: 0
        },
        theme: {
           color: "#5ab7f5",
            fill: 'white',
            'stroke-width': 2,
            stroke: '#5ab7f5',
            r: 5,
            states: {
                hover: {
                    color: 'white',
                    fill: '#5ab7f5'
                },
                select: {
                    fill: '#5ab7f5'
                }
            }
        }
    },

这是参考链接

Answer 1

如果有人想避免使用 CSS 选择器，您可以使用style属性为文本按钮添加 CSS 样式。

theme: {
  style: { color: "red" },
  ...
}

Answer 2

你没有走得足够远到tspan并且你正在使用颜色而不是填充。 你还漏掉了几个“。” 选课的时候。

创建此规则似乎有效

g.highcharts-button.highcharts-drillup-button text tspan{
  fill: blue;
}

如果您不想输入所有这些内容， .highcharts-drillup-button text tspan应该可以工作。

演示

Answer 3

您可以通过使用 highchart 钻取按钮 css 样式类将颜色应用于文本来更改文本的颜色。 之所以简单的color:red属性不起作用，是因为它是在运行时创建的 svg 并且 svg 还为文本设置了填充属性，它会覆盖颜色。 最重要的是，您需要通过为每个属性集使用!important关键字来强制自定义类颜色。 因此，只需在您的自定义 css 中添加以下类，您的钻取按钮文本就会更改。

.highcharts-drillup-button text{
   color: red !important;
   fill: red !important;
}

希望这会有所帮助。

Answer 4

使用这个选择器：

.highcharts-button-box+text {
  fill: red !important;
}

示例：
http://jsfiddle.net/vwdfceLz/