3

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

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

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

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

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

我的线条颜色设置正常：

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

有任何想法吗？

提前致谢。

4

3 回答 3

6

除了使用格式化程序之外，无法以其他方式设置它。只有这样的东西：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; 
}
于 2013-09-11T13:31:42.047 回答
1

您也可以尝试与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/

于 2018-04-11T09:13:18.003 回答
0

老问题，但另一种方法是挂钩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>

于 2016-07-30T19:35:57.900 回答