Highcharter自定义hc_tooltip格式化器添加文字颜色后丢失标记，恢复标记失败求解决

嘿，我明白你遇到的问题了——自定义tooltip formatter来匹配系列颜色后，默认的标记就消失了，对吧？别担心，这是因为当你自己写formatter函数时，Highcharts不会再自动帮你渲染那些默认的标记元素了，得咱们手动把标记加到tooltip的HTML内容里才行。

给你一个可行的解决方案，直接在formatter里生成一个和系列颜色一致的圆形标记，同时保留文字颜色匹配的效果：

hc <- hc %>% 
  hc_tooltip(
    shared = TRUE,
    split = FALSE,
    valueDecimals = 2,
    formatter = JS(
      "function () {
        // 先添加日期标题
        var tooltip = '<b>' + Highcharts.dateFormat('%Y-%m-%d', this.x) + '</b><br/>';
        // 遍历每个数据点
        $.each(this.points, function (i, point) {
          // 生成圆形标记：用span模拟，背景色取系列颜色
          var marker = '<span style=\"display:inline-block; width:10px; height:10px; border-radius:50%; background-color:' + point.series.color + '; margin-right:8px; vertical-align:middle;\"></span>';
          // 拼接标记、带颜色的系列名称和数值
          tooltip += marker + '<span style=\"color:' + point.series.color + '\">' + point.series.name + ': ' + point.y.toFixed(2) + '</span><br/>';
        });
        return tooltip;
      }"
    )
  )

几点说明： #

• 这里用<span>元素模拟了圆形标记，通过border-radius:50%实现圆形，背景色直接用point.series.color取系列的颜色，和文字颜色保持一致；
• 加上vertical-align:middle可以让标记和文字对齐得更美观；
• 你之前设置的symbol = "circle"参数之所以没生效，是因为当自定义formatter时，Highcharts会忽略这类默认样式参数，完全由formatter生成的HTML决定tooltip内容；
• 如果需要方形标记，只需要把border-radius:50%去掉就行，或者根据系列的point.marker.symbol属性来动态调整样式。

这样调整后，tooltip就能同时显示匹配系列颜色的标记和文字啦～

备注：内容来源于stack exchange，提问作者jjunju