更改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/