Question

我想知道如何更改drillUpButton文本的字体颜色。我尝试使用css来提取元素：g.highcharts-button highcharts-drillup-button highcharts-button-normal text {color：blue;}但它不起作用。 Button Picture

drillUpButton 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'
                }
            }
        }
    },

Here is the link for reference

Answer 1

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

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

Answer 2

你与tspan相距甚远，并且你使用的是颜色而不是填充。你也错过了一对夫妇＆＃34;。＆＃34;选择课程时。

创建此规则似乎有效

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

如果您不想输入所有内容，.highcharts-drillup-button text tspan也应该有效。

DEMO

Answer 3

您可以使用高图钻取按钮css样式类来更改文本的颜色，以将颜色应用于文本。它上面的简单color:red属性之所以不起作用，是因为它是在运行中创建的svg而且svg也设置了文本的fill属性，并覆盖了颜色。最重要的是，您需要使用每个属性集的!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/

更改drillUpButton文本的字体颜色

4 个答案: