R flexdashboard中gauge仪表盘文本颜色CSS修改问题咨询

问题原因 #

flexdashboard 的 gauge 仪表盘基于 SVG 渲染，所有文本内容都是 SVG 的 <text> 元素，默认通过 fill 属性控制颜色，父元素的 color 属性无法作用到 SVG 文本上，所以你之前的文本颜色设置不生效。

修正方案 #

你只需要在原有样式基础上新增针对SVG文本的样式规则即可：

.chart-wrapper {
  background-color: #222c3d;
}
/* 匹配仪表盘内所有SVG文本 */
.chart-wrapper .gauge text {
  fill: yellow !important;
}

完整可运行的Rmd示例 #

---
title: Gauge
runtime: shiny
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: fill
    theme: yeti
---

<!-- 自定义样式块 -->
<style>
.chart-wrapper {
  background-color: #222c3d;
}
.chart-wrapper .gauge text {
  fill: yellow !important;
}
</style>

### Probability
```{r}
library(flexdashboard)

gauge(
   value = 56, min = 1, max = 100, symbol = "%", 
   gaugeSectors(colors = c("#008cba")), label = "Index"
)

如果需要单独调整不同位置的文本颜色，可以使用更精准的选择器：
- 中间核心数值：`.gauge .gauge-value`
- 底部标签文本：`.gauge .gauge-label`
- 刻度数值：`.gauge .gauge-tick text`

内容的提问来源于stack exchange，提问作者neves