Bagaimana cara menggunakan gambar/ikon sebagai label di highcharter? R berkilau

Saya menggunakan highcharter untuk membuat plot batang, dalam aplikasi yang mengkilap, tetapi saya mengalami masalah dalam menampilkan ikon sebagai label pada sumbu x. Tujuannya adalah menggunakan gambar svg dari file yang ditempatkan di direktori kerja.

Saya telah melampirkan contoh di bawah ini dan saya telah mencari inspirasi di dua tautan berikut tetapi saya mengalami kesulitan dalam memasukkan fungsi JS ke dalam R mengkilap - pengaturan. https://www.highcharts.com/demo/column-comparison https://www.highcharts.com/forum/viewtopic.php?t=16609

Saya pikir masalahnya adalah backslach sebelum tanda kutip, tetapi ketika saya menampilkan ikon di aplikasi saya hanya menggunakan tags$div(HTML("<img src = \"logoA.svg\">")), itu ditampilkan dengan sempurna (logoA.svg ditempatkan di folder www)

Ada saran bagaimana mengatasi ini?

  
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)

person kangaro0o    schedule 08.02.2021    source sumber


Jawaban (1)


Anda hampir sampai, cukup pindahkan parameter useHTML=T dari fungsi hc_xAxis ke daftar 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
                 ))
person HubertL    schedule 08.02.2021
comment
terima kasih - berhasil! Saya juga perlu menentukan lebar dan tinggi seperti ini: return '‹img src = \LogoA.svg\ width=\50\ height=\60\›' - person kangaro0o; 09.02.2021