Question

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

我正在尝试找到最合理的原生方式来处理这个 - 如果可以避免向格式化程序添加带有背景颜色的<div />，那会很棒 - 但如果不是，我猜也有效。

线条颜色＆amp;金额将会发生很大变化，所以我不想像设置线条颜色一样对背景颜色进行硬编码 - 如果它们可以绘制与线条颜色相同的背景，那就太棒了。

我唯一的想法不起作用，我不确定这种功能的范围在这种情况下是什么：

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

我的线条颜色正常设置：

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

有什么想法吗？

提前致谢。

Answer 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; 
}

Answer 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/

Answer 3

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

＆＃13;

$(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]
        }]
    });
});

＆＃13;

<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>

＆＃13;

根据线的Highcharts工具提示背景

3 个答案: