【问题标题】:How to use images/icons as labels in highcharter? R shiny如何在 highcharter 中使用图像/图标作为标签? R 闪亮
【发布时间】:2021-05-11 21:25:39
【问题描述】:

我正在使用 highcharter 在闪亮的应用程序中制作条形图,但在将图标显示为 x 轴上的标签时遇到问题。目标是使用位于工作目录中的文件中的 svg 图像。

我在下面附上了一个示例,并在以下两个链接中搜索了灵感,但我在将 JS 函数导入 R Shiny - 设置时遇到了麻烦。 https://www.highcharts.com/demo/column-comparison https://www.highcharts.com/forum/viewtopic.php?t=16609

我虽然问题是引号前的反斜杠,但是当我在我的应用程序中显示图标时只是使用 tags$div(HTML("<img src = \"logoA.svg\">")),完美显示(logoA.svg放在www文件夹中)

有什么建议可以解决这个问题吗?

  
library(shiny)
library(highcharter)
library(dplyr)


## app.R ##
server <- function(input, output) {
  output$plot<- renderHighchart({
    
    Label1<- c("A","A","B","B")
    Label2<- c("1","2","1","2")
    Val<- runif(4,0,100)
    col<-c("#d21e1e","#009beb","#ff5a1a","#009beb")
    Data<-data.frame(Label1,Label2,Val,col)
 
    highchart(type="chart") %>%
      hc_add_series(data = Data,type = "column",
                    hcaes(x = Label1,
                          y = Val,
                          group = Label2,
                          color = col),
                    dataLabels = list(enabled = TRUE, format='{point.mean}'))%>%
      hc_legend(enabled = F)%>% 
      hc_xAxis(type= 'category', useHTML=T, labels=list(formatter = JS("function(){
                                                          if(this.value == 'A'){
                                                            return '<img src=\"logoA.svg\"></img>';
                                                          }else if(this.value == 'B')
                                                            return '<img src=\"logoB.svg\"></img>';
                                                          }")) )

  })
}

ui <- fluidPage(
  tags$div(
    HTML("<img src=\"logoA.svg\"></img>")
  ),
  
  highchartOutput("plot")
  
)

shinyApp(ui = ui, server = server)

【问题讨论】:

    标签: javascript r highcharts shiny r-highcharter


    【解决方案1】:

    你快到了,只需将useHTML=T 参数从hc_xAxis 函数移到labels 列表:

        highchart(type = "chart") %>%
            hc_add_series(
                data = Data,
                type = "column",
                hcaes(
                    x = Label1,
                    y = Val,
                    group = Label2,
                    color = col
                ),
                dataLabels = list(enabled = TRUE, format = '{point.mean}')
            ) %>%
            hc_legend(enabled = F) %>%
            hc_xAxis(type = 'category',
                     labels = list(
                         formatter = JS(
                             "function(){
                                  if(this.value == 'A'){
                                    return '<img src=\"logoA.svg\"></img>';
                                  }else if(this.value == 'B')
                                    return '<img src=\"logoB.svg\"></img>';
                                  }"
                         ),
                         useHTML = T
                     ))
    

    【讨论】:

    • 谢谢 - 它有效!我还需要像这样指定宽度和高度: return ''
    猜你喜欢
    • 2015-11-19
    • 2021-05-19
    • 1970-01-01
    • 1970-01-01
    • 2014-01-01
    • 1970-01-01
    • 2017-11-03
    • 2020-01-08
    • 1970-01-01
    相关资源
    最近更新 更多