根据行Highcharts提示背景（不设置backgroundColor = null） [英] Highcharts tooltip background according to line (without setting backgroundColor = null)

问题描述

我有这个完全相同的问题：根据行 p>

因此，为什么我一直在尝试更新格式化程序本身的工具提示背景颜色，我可以访问系列颜色：

  args.options = Object.assign（args.options，{backgroundColor：this.series.color}）; 
 this.color = this.series.color; 
  

但由于某种原因，只有初始颜色替换适用于我。然后后续工具提示会显示我第一次更新的颜色。

第一次悬停：
第二次悬停：

AND

第一次悬停：
第二次悬停：

问题演示： http://jsfiddle.net/GGQ2a/23/

<刷新页面a几次，并悬停在不同的系列来查看问题。

我需要在每次悬停时更改颜色，并且由于某些原因，只有在第一次放回时才会提取替换物。

Tooltip.refresh（）方法并根据点的系列颜色更改工具提示的背景。

>

  const H = Highcharts; 
 
 .wrap（H.Tooltip.prototype，'refresh'，function（p，point，mouseEvents）{
 p.call（this，point，mouseEvents）; 
 
 const label = this.label; 
 
 if（point& label）{
 label.attr（{
 fill：point.series.color 
}）; 
} 
}）; 
  

例子： http://jsfiddle.net/t38x6kug/

I have this exact same issue: Highcharts tooltip background according to line

but the solutions provided here do not work for me because setting backgroundColor to null makes the pointer arrow disappear:

Hence why I have been working with trying to update the tooltip background color from the formatter itself where I have access to the series color:

      args.options = Object.assign(args.options, {backgroundColor : this.series.color});
      this.color = this.series.color;

But for some reason only the initial color replacement works for me. Then subsequent tooltips show the color that I updated the first time.

First hover: Second hover:

AND

First hover: Second hover:

Demo of issue: http://jsfiddle.net/GGQ2a/23/

Refresh the page a couple times and hover on different series to see the issue.

I need to change the color on every hover and for some reason the replacement only gets picked up the first time arround

解决方案

You can wrap Tooltip.refresh() method and change the tooltip's background according to the point's series color.

const H = Highcharts;

H.wrap(H.Tooltip.prototype, 'refresh', function (p, point, mouseEvents) {
  p.call(this, point, mouseEvents);

  const label = this.label;

  if (point && label) {
    label.attr({
      fill: point.series.color
    });
  }
});

example: http://jsfiddle.net/t38x6kug/

这篇关于根据行Highcharts提示背景（不设置backgroundColor = null）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！