Shiny应用中替换gvisGeoChart颜色轴两侧数字为文本的方法

我用Shiny开发的应用中，通过gvisGeoChart生成的地图，颜色轴两侧的数字没有实际意义，希望替换成“Better”和“Worse”；如果无法实现文本替换，至少为颜色轴添加顶部标题。已尝试相关技术回答但无法落实，需要明确的实现指导，相关代码如下：

library(shiny)
library(googleVis)
library(dplyr)
library(DT)

# Load your data
combined_vul_data <- 
  structure(list(ISO3 = c("AF", "AL", "DZ", "AD", "AO", "AG", "AR", 
                          "AM", "AU", "AT", "AZ", "BS", "BH", "BD", "BB", "BY", "BE", "BZ", 
                          "BJ", "BT"), Name = c("Afghanistan", "Albania", "Algeria", "Andorra", 
                                                "Angola", "Antigua and Barbuda", "Argentina", "Armenia", "Australia", 
                                                "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", 
                                                "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bhutan"
                          ), vul_capacity_Rank_2021 = c(0.709035449, 0.511126182, 0.523332101, 
                                                        NA, 0.740026186, 0.621133795, 0.446088596, 0.462491218, 0.296565054, 
                                                        0.26689445, 0.47917568, NA, 0.453936004, 0.649876424, 0.398904506, 
                                                        0.386808093, 0.27763708, 0.547525366, 0.763503499, 0.635633065
                          )), class = "data.frame", row.names = c(NA, -20L))


# Define UI for the map
ui <- fluidPage(
      titlePanel(div(span("Country Rankings"), style={'padding-top: 15px'})),
  tabsetPanel(
    tabPanel("Vulnerability Map",
             sidebarLayout(
               sidebarPanel(
                 selectInput("year", "Select Year", choices = 2021, selected = 2021),
                 selectInput("category", "Select Category", 
                             choices = list("Adaptive Capacity" = "vul_capacity"), selected = "vul_vulnerability")
               ),
               mainPanel(
                 htmlOutput("map")
               )
             )
    )
  )
)

# Define server logic for the map
server <- function(input, output) {
   output$map <- renderGvis({
    year <- input$year
    category <- input$category
    
    # Create the column name for the selected year and category
    rank_column <- paste(category, "_Rank_", year, sep = "")
    
    # Filter and prepare the data
    map_data <- combined_vul_data %>%
      select(ISO3, Name, Rank = !!sym(rank_column)) %>%
      mutate(Tooltip = ifelse(is.na(Rank), paste(Name, "- Insufficient data"), paste(Name)))
    
    # Update locationvar column
    map_data <- map_data %>%
      mutate(Location = ifelse(Name %in% c("Congo (Brazzaville)", "Congo (Kinshasa)"), ISO3, Name))
    
    # Determine the range of the Rank values
    min_rank <- min(map_data$Rank, na.rm = TRUE)
    max_rank <- max(map_data$Rank, na.rm = TRUE)
    
    # Create the map
    gvisGeoChart(map_data, locationvar = "Location", colorvar = "Rank",
                 hovervar = "Tooltip",  
                 options = list(colorAxis = paste0("{minValue:", min_rank, ", maxValue:", max_rank, ", colors:['#00FF00', '#FFFF00', '#FF0000']}"),
                                backgroundColor = '#81d4fa', datalessRegionColor = '#f5f5f5',
                                defaultColor = '#f5f5f5',
                                tooltip = "{isHtml: true}",
                                width = "100%",
                                height = "500px"))  
  })
  
}

shinyApp(ui = ui, server = server)

一、原生实现：替换颜色轴文本+添加标题 #

gvisGeoChart基于Google Charts API，可通过配置colorAxis的ticks和title参数，同时实现文本替换和标题添加，这是最稳定的方案：

修改后的server代码 #

server <- function(input, output) {
  output$map <- renderGvis({
    year <- input$year
    category <- input$category
    
    # Create the column name for the selected year and category
    rank_column <- paste(category, "_Rank_", year, sep = "")
    
    # Filter and prepare the data
    map_data <- combined_vul_data %>%
      select(ISO3, Name, Rank = !!sym(rank_column)) %>%
      mutate(Tooltip = ifelse(is.na(Rank), paste(Name, "- Insufficient data"), paste(Name)))
    
    # Update locationvar column
    map_data <- map_data %>%
      mutate(Location = ifelse(Name %in% c("Congo (Brazzaville)", "Congo (Kinshasa)"), ISO3, Name))
    
    # Determine the range of the Rank values
    min_rank <- min(map_data$Rank, na.rm = TRUE)
    max_rank <- max(map_data$Rank, na.rm = TRUE)
    
    # 动态设置颜色轴标题
    axis_title <- ifelse(category == "vul_capacity", "Adaptive Capacity", "Vulnerability")
    
    # Create the map with custom color axis settings
    gvisGeoChart(map_data, locationvar = "Location", colorvar = "Rank",
                 hovervar = "Tooltip",  
                 options = list(
                   colorAxis = paste0(
                     "{minValue:", min_rank, 
                     ", maxValue:", max_rank, 
                     ", colors:['#00FF00', '#FFFF00', '#FF0000'],",
                     "title: '", axis_title, "',",  # 添加颜色轴顶部标题
                     "ticks: [{v:", min_rank, ", f:'Better'}, {v:", max_rank, ", f:'Worse'}]",  # 替换极值文本
                     "}"
                   ),
                   backgroundColor = '#81d4fa', 
                   datalessRegionColor = '#f5f5f5',
                   defaultColor = '#f5f5f5',
                   tooltip = "{isHtml: true}",
                   width = "100%",
                   height = "500px"
                 ))  
  })
}

核心说明 #

• ticks参数：通过v指定数据值，f指定对应的显示文本，直接替换颜色轴两端的数字为“Better”和“Worse”
• title参数：为颜色轴添加顶部标题，还能根据选中的分类动态切换标题内容

二、备选方案：修改HTML输出替换文本 #

如果原生配置无法满足需求，可通过修改gvis生成的HTML字符串来替换文本：

修改后的server代码 #

server <- function(input, output) {
  output$map <- renderUI({
    year <- input$year
    category <- input$category
    
    rank_column <- paste(category, "_Rank_", year, sep = "")
    
    map_data <- combined_vul_data %>%
      select(ISO3, Name, Rank = !!sym(rank_column)) %>%
      mutate(Tooltip = ifelse(is.na(Rank), paste(Name, "- Insufficient data"), paste(Name))) %>%
      mutate(Location = ifelse(Name %in% c("Congo (Brazzaville)", "Congo (Kinshasa)"), ISO3, Name))
    
    min_rank <- min(map_data$Rank, na.rm = TRUE)
    max_rank <- max(map_data$Rank, na.rm = TRUE)
    
    # 生成基础gvis图表对象
    gvis_obj <- gvisGeoChart(map_data, locationvar = "Location", colorvar = "Rank",
                             hovervar = "Tooltip",  
                             options = list(colorAxis = paste0("{minValue:", min_rank, ", maxValue:", max_rank, ", colors:['#00FF00', '#FFFF00', '#FF0000']}"),
                                            backgroundColor = '#81d4fa', datalessRegionColor = '#f5f5f5',
                                            defaultColor = '#f5f5f5',
                                            tooltip = "{isHtml: true}",
                                            width = "100%",
                                            height = "500px"))  
    
    # 将gvis对象转为HTML字符串并替换文本
    chart_html <- as.character(gvis_obj)
    # 匹配显示的极值数字（保留两位小数，对应数据格式）
    chart_html <- gsub(paste0(">", round(min_rank, 2), "<"), ">Better<", chart_html)
    chart_html <- gsub(paste0(">", round(max_rank, 2), "<"), ">Worse<", chart_html)
    
    # 返回修改后的HTML
    HTML(chart_html)
  })
}

注意事项 #

• 该方案依赖HTML结构，若Google Charts更新渲染逻辑可能失效
• 需要根据实际数据的显示格式调整round()的小数位数，确保匹配到正确的数字

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