根据线Highcharts工具提示背景 [英] Highcharts tooltip background according to line

问题描述

我试图找到最合理的原生方式来处理这个问题 - 我试图让工具提示的背景颜色与使用Highcharts的线条颜色相匹配。 - 如果可以避免在格式化程序中添加带有背景颜色的< div /> ，那就太好了 - 但如果没有的话，我猜这也可以。 / p>

颜色和线条金额会改变很多，所以我不想像背景颜色那样对背景颜色进行硬编码 - 如果他们可以将背景与线条颜色相同绘制，那就太棒了。

我唯一的想法没有奏效，我不确定这种情况下这些函数的作用域是什么：

  tooltip：{
 backgroundColor：function（）{
 return this.line.color; 
 //返回this.point.color; 
 
 
  

我的线条颜色正常设置：

 系列：[
 {
颜色：'＃fa0'
} 
] 
  

有什么想法？

预先感谢。 / p>

解决方案

使用格式化程序不能以其他方式进行设置。只有这样：
http://jsfiddle.net/GGQ2a/2/

JS：

 工具提示：{
 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; 
} 
  

I'm trying to make the tooltip's background color match the line's color using Highcharts.

I'm trying to find the most reasonable native way to handle this -- if it's possible to avoid adding a <div /> with a background color to the formatter, that would be great - but if not I guess that works too.

The lines colors & amount will change a lot so I don't wanna hard-code the background colors the same way I put the line colors - if they could draw the background the same as the line color, that would be great.

My only idea didn't work, I'm not sure what the scope for these functions is in this case:

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

My line colors are set normally:

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

Any ideas?

Thanks in advance.

解决方案

It's not possible to set this in other way than using formatter. Only something like this: 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>';
        }
    },

And CSS:

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

这篇关于根据线Highcharts工具提示背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！