จะใช้รูปภาพ / ไอคอนเป็นป้ายกำกับใน Highcharter ได้อย่างไร อาร์มันเงา

ฉันกำลังใช้ Highcharter เพื่อสร้างพล็อตแท่งในแอปมันวาว แต่ฉันประสบปัญหาในการแสดงไอคอนเป็นป้ายกำกับบนแกน x เป้าหมายคือการใช้รูปภาพ svg จากไฟล์ที่วางอยู่ในไดเร็กทอรีการทำงาน

ฉันได้แนบตัวอย่างด้านล่างและฉันได้ค้นหาแรงบันดาลใจในสองลิงก์ต่อไปนี้ แต่ฉันประสบปัญหาในการทำให้ฟังก์ชัน JS กลายเป็น R Shiny - การตั้งค่า https://www.highcharts.com/demo/column-comparison https://www.highcharts.com/forum/viewtopic.php?t=16609

ฉันคิดว่าปัญหาคือ backslach ก่อนเครื่องหมายคำพูด แต่เมื่อฉันแสดงไอคอนในแอปของฉันโดยใช้ 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)

person kangaro0o    schedule 08.02.2021    source แหล่งที่มา


คำตอบ (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
                 ))
person HubertL    schedule 08.02.2021
comment
ขอบคุณ - มันได้ผล! ฉันยังต้องระบุความกว้างและความสูงเช่นนี้: return '‹img src = \LogoA.svg\ width=\50\ height=\60\›' - person kangaro0o; 09.02.2021