如何在R中的highcharteR中使用base64？

d7v8vwbk 于 2023-09-27 发布在其他

关注(0)|答案(1)|浏览(126)

假设我们有以下矩阵：

m <- matrix(1:12, 3, 4, dimnames=list(LETTERS[1:3], LETTERS[1:4]))

我们使用highcharteR绘制：

library(highcharter)
hchart(head(m, -1), "bubble", hcaes(),
       showInLegend = FALSE)

然后，我们可以用图像替换x轴的标签，例如，对于A：

hchart(head(m, -1), "bubble", hcaes(),
       showInLegend = FALSE) %>% 
  hc_xAxis(type = 'category',
           labels = list(
             formatter = JS(
               "function(){
                  if(this.value == 'A'){
                    return '<img src=\"https://www.highcharts.com/samples/graphics/sun.png\"></img>';
                  } else {
                    return this.value;
                  }
               }"
             ),
             useHTML = TRUE
           ))

这将给予我们：

但是我们如何使用base64而不是url得到相同的结果呢？有没有什么方法可以把图片嵌入到html的highcharteR文件中？

我尝试将图像转换为base64并将其嵌入到图表中：

image_path <- "https://www.highcharts.com/samples/graphics/sun.png"
image_data <- base64enc::dataURI(file=image_path, mime="image/png")
hchart(head(m, -1), "bubble", hcaes(),
       showInLegend = FALSE) %>% 
  hc_xAxis(type = 'category',
           labels = list(
             formatter = JS(
               sprintf(
                 "function(){
                    if(this.value == 'A'){
                      return '<img src=\"%s\"></img>';
                    } else {
                      return this.value;
                    }
                 }",
                 image_data
               )
             ),
             useHTML = TRUE
           ))

但这让我没有印象。输出是空白的，html（在输出中）在这个位置只是：<img>

r

来源：https://stackoverflow.com/questions/76929240/how-to-use-base64-in-highcharter-in-r

1条答案

按热度按时间

qzlgjiam1#

问题是highcharts.js正在验证labels.formatter等函数生成的html。特别是，src属性必须以Highcharts.AST.allowedReferences中包含的值之一开始，请参阅源代码中的内容。
一个简单的解决方案是单独设置src，在当前JavaScript指令序列完成后立即使用setTimeout。这意味着要替换

return '<img src=\"%s\"></img>';

与

setTimeout(function(){document.getElementById('img_data1').src = '%s'}, 0);
return '<img id=\"img_data1\"></img>';

更规范的解决方案是通过添加"data:"作为允许的前缀来更改Highcharts.AST.allowedReferences。虽然这可以在formatter本身完成：

function(){
    if(this.value == 'A'){
        if(Highcharts.AST.allowedReferences.indexOf('data:') === -1){
            Highcharts.AST.allowedReferences.push('data:')
        }
        return '<img src=\"%s\"></img>';
    } else {
        return this.value;
    }
}

只对allowedReferences进行一次更改会更有效，例如通过prepending对highcharter生成的htmlwidget的JavaScript语句（或通过特定于您的应用程序的其他初始化钩子）：

library(highcharter);
library(htmlwidgets);
library(htmltools);
m <- matrix(1:12, 3, 4, dimnames=list(LETTERS[1:3], LETTERS[1:4]))
image_path <- "https://www.highcharts.com/samples/graphics/sun.png"
image_data <- base64enc::dataURI(file=image_path, mime="image/png")
initCode <- HTML("<script>Highcharts.AST.allowedReferences.push('data:')</script>")
hchart(head(m, -1), "bubble", hcaes(),
       showInLegend = FALSE) %>% 
  prependContent(initCode) %>%     
  hc_xAxis(type = 'category',
           labels = list(
             formatter = JS(
               sprintf(
                 "function(){
                    if(this.value == 'A'){
                      return '<img src=\"%s\"></img>';
                    } else {
                      return this.value;
                    }
                 }",
                 image_data
               )
             ),
             useHTML = TRUE
           ))

展开查看全部

赞(0）回复(0）举报 2023-09-27

我来回答

如何在R中的highcharteR中使用base64？

1条答案

相关问题

热门标签

最新问答