Shiny应用中Highcharts图表图片渲染失败求助

你在dataLabels的formatter里直接调用this.renderer.image()并和字符串拼接返回，这是错误的。this.renderer.image()是用来直接往Highcharts的SVG画布上加元素的方法，返回的是图形对象而非HTML字符串，拼接后会生成无效内容，导致图片无法显示。

直接在formatter中返回<img>HTML标签嵌入图片，Highcharts会自动将其渲染在数据标签对应位置：

dataLabels = list(
  enabled = TRUE,
  allowOverlap = TRUE,
  style = list(
    fontWeight = "italic",
    fontSize = 11
  ),
  formatter = JS("
    function(){
      return '<img src=\"https://www.highcharts.com/samples/graphics/sun.png\" width=\"30\" height=\"30\"><br>sim API: ' + this.point.sim_api.toFixed(0);
    }")
)

如果需要让图片和文字的对齐更美观，可以给<img>标签添加style属性调整margin：

formatter = JS("
  function(){
    return '<img src=\"https://www.highcharts.com/samples/graphics/sun.png\" width=\"30\" height=\"30\" style=\"margin: -10px 0;\"><br>sim API: ' + this.point.sim_api.toFixed(0);
  }")

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