Highcharts 工具提示背景根据线答案

【问题标题】：Highcharts tooltip background according to lineHighcharts 工具提示背景根据线
【发布时间】：2018-04-11 17:13:18
【问题描述】：

我正在尝试使用 Highcharts 使工具提示的背景颜色与线条颜色匹配。

我正在尝试找到最合理的本地方式来处理这个问题——如果可以避免在格式化程序中添加带有背景颜色的 <div />，那就太好了——但如果不是，我想这也可以.

线条颜色和数量会发生很大变化，所以我不想像放置线条颜色一样硬编码背景颜色 - 如果他们可以绘制与线条颜色相同的背景，那就太好了.

我唯一的想法没有奏效，我不确定在这种情况下这些功能的范围是什么：

tooltip : {
    backgroundColor: function() {
        return this.line.color;
        //return this.point.color;
    }
}

我的线条颜色设置正常：

series : [
    {
        color : '#fa0'
    }
]

有什么想法吗？

提前致谢。

【问题讨论】：

标签： javascript highcharts

【解决方案1】：

除了使用格式化程序之外，无法以其他方式进行设置。只有这样的东西： http://jsfiddle.net/GGQ2a/2/

JS：

tooltip: {
        useHTML: true,
        backgroundColor: null,
        borderWidth: 0,
        shadow: false,
        formatter: function(){
            return '<div style="background-color:' + this.series.color + '" class="tooltip"> ' +
                    this.series.name + '<br>' + this.key + '<br>' + this.y +
                '</div>';
        }
    },

还有 CSS：

.tooltip {
  padding: 5px;
  border-radius: 5px;
  box-shadow: 2px 2px 2px; 
}

【讨论】：

我的情况下没有应用 css。这里有写css的顺序吗？谢谢！
你能在 jsfiddle 上重新创建问题吗？如您所见，我的演示工作正常 - 请确保您已正确设置所有选项。
有没有办法在不将 backgroundColor 设置为 null 的情况下做到这一点？这是默认删除指针箭头stackoverflow.com/questions/42772038/…

【解决方案2】：

您也可以尝试连接mouseOver 事件。

与 Paweł Fus 解决方案相比，此解决方案的优势在于您可以保持工具提示的宽度，这对于漂亮的锚点是必要的。

参考： https://api.highcharts.com/highcharts/plotOptions.series.events.mouseOver

 plotOptions: {
        series: {
            stickyTracking: false,
            events: {
                mouseOver() {
                    const color = arguments[0].target.color;

                    this.chart.tooltip.options.backgroundColor = color; //first time overwrite
                    const tooltipMainBox = document.querySelector(`g.highcharts-tooltip path:last-of-type`);
                    if (tooltipMainBox) {
                      tooltipMainBox.setAttribute('fill', color);
                    }
                }
            }
        }
    }

jsFiddle：http://jsfiddle.net/ymdLzzkb/1/

【讨论】：

【解决方案3】：

老问题，但另一种方法是挂钩tooltipRefresh 事件并与一些jquery 交换。工作代码：

$(function () {
    $('#container').highcharts({
        chart: {
            type:'column',
            events: {
            tooltipRefresh: function(e) {
              if (!e.target.hoverSeries) return;
              $('.highcharts-tooltip>path:last-of-type')
                .css('fill', e.target.hoverSeries.color);
            }
          }
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        },{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        },{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

【讨论】：