使用格式化程序自定义 hc_tooltip 以添加文本颜色删除了我的标记并尝试将它们恢复失败

Question

我正在尝试 R 中的 highcharter 包。我正在尝试添加工具提示。默认值（第一个示例）为我提供了一个标记和系列名称。

hc_tooltip(
      shared = TRUE,
      split = FALSE,
      valueDecimals = 2)

但是当我尝试向工具提示添加文本颜色以匹配系列颜色时，我丢失了标记。我下面的尝试仅产生标记名称，但不产生标记。有人有解决我的尝试的解决方案吗？

hc<-hc %>% hc_tooltip(
    shared = TRUE,
    split = FALSE,
    valueDecimals = 2,
    symbol = "circle",
    formatter = JS(
      "function () {
        var tooltip = '<b>' + Highcharts.dateFormat('%Y-%m-%d', this.x) + '</b><br/>';
        $.each(this.points, function (i, point) {
          var color = point.series.color;
          var marker = point.series.symbol; // Get the marker symbol
          tooltip += '<span style=\"color:' + color + ';\"><b>' + marker + '</b>: '+ point.series.name + '</b>: ' + point.y.toFixed(2) + '</span><br/>';
        });
        return tooltip;
      }"
    )
  )

Answer 1

这不是一个优雅的解决方案，但它可以完成工作。

默认工具提示包含采用此形式的每个系列的前置范围：

<span style="color:rgb(161,173,255)">●</span>

因此，您可以将它们添加到工具提示中，如下所示，在将

useHTML = TRUE

添加到

hc_tooltip()

调用后，使用地图查找相应的 html 代码。

library(highcharter)

highchart() %>%
  hc_add_series(data = sample(1:12)) %>%
  hc_add_series(data = sample(1:12) + 10) %>%
  hc_tooltip(
    shared = TRUE,
    split = FALSE,
    valueDecimals = 2,
    useHTML = TRUE, 
    formatter = JS("
function () {
    var tooltip = '<b>' + Highcharts.dateFormat('%Y-%m-%d', this.x) + '</b><br/>';
    
    $.each(this.points, function (i, point) {
        let symbolMap = new Map();
        symbolMap.set('circle',        '&#9679');
        symbolMap.set('diamond',       '&#9670');
        symbolMap.set('square',        '&#9632');
        symbolMap.set('triangle',      '&#9650');
        symbolMap.set('triangle-down', '&#9660');
    
        var color = point.series.color;
        var symbolName = point.series.symbol;
        
        tooltip += '<span style=\"color:' + color + ';\">' + symbolMap.get(symbolName) + '</span><span style=\"color:' + color + ';\">: '+ point.series.name + '</b>: ' + point.y.toFixed(2) + '</span><br/>';
    });
    return tooltip;
}
"
    )
  )