如何解决如何在highcharts中为不同系列的整个工具提示应用不同的背景颜色
对于不同的系列,我将为整个工具提示提供不同的背景色。我检查了highcharts api文档,但它们在series.tooltip = {}中没有背景色选项。 您能为此提出一些建议吗?
我检查了这个问题-Changing backgroundcolor of tooltip for a specific data point in Highcharts
我的问题与此类似。 例如我想通过格式化程序对系列应用红色,而不希望使用工具提示选项中给出的黄色背景颜色。 请检查这个小提琴-http://jsfiddle.net/eoqdcxn4/1/
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},tooltip: {
useHTML:true,backgroundColor:"yellow",formatter: function() {
console.log(this);
if(this.point.customBck)
return '<div style="background-color:red;">The value for <b>'+ this.x + '</b> is <b>'+ this.y +'</b></div>';
else
return '<div>The value for <b>'+ this.x + '</b> is <b>'+ this.y +'</b></div>';
}
},xAxis: {
categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
},series: [{
data: [{
y:29.9,customBck: true
},71.5,106.4,129.2,144.0,176.0,135.6,148.5,216.4,194.1,95.6,54.4]
}]
});
});
谢谢。
解决方法
您可以根据悬停的系列在refresh
事件中更改工具提示的背景颜色,例如:
(function(H) {
H.addEvent(H.Tooltip,'refresh',function(e) {
var series = this.chart.series.find(function(s) {
return s.isHovered;
});
this.label.attr({
fill: series.options.tooltipColor
});
});
}(Highcharts));
$(function() {
var chart = new Highcharts.Chart({
...,plotOptions: {
series: {
events: {
mouseOver: function() {
this.isHovered = true;
},mouseOut: function() {
this.isHovered = false;
}
}
}
},series: [{
tooltipColor: 'red',...
},{
tooltipColor: 'yellow',...
}]
});
});
实时演示: http://jsfiddle.net/BlackLabel/ojqews35/
API参考: https://api.highcharts.com/highcharts/plotOptions.series.events
文档: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。