Highcharts曲线图 - 突出显示点悬停上的xAxis标签
问题描述:
面对突出显示折线图中标签的问题。Highcharts曲线图 - 突出显示点悬停上的xAxis标签
我在这里找到一个类似的主题Bold X-Axis Label on Point Hover in Highcharts Column Chart,但它不适合(在这种情况下没有找到关于xAxis [0] .labelGroup的任何信息)。也有一个在文档
选中的标签,并应突出最接近的一个。轴的类型是日期时间,间隔为6小时
我的例子: https://jsfiddle.net/sjapdya6/
我试图使用:
mouseOver: function() {
$($('.customLabel')[this.x]).addClass('customLabelSelected');
}
添加这些类:
<style>
.customLabel {
color: #00FF00;
background-color: rgba(10, 10, 90, 0.8);
}
.customLabelSelected {
color: #FF0000;
}
</style>
但它不能正常工作。 有谁知道如何做到这一点?
预先
答
轴非常感谢保持对象称为蜱和该对象内的蜱通过其在轴线值来标识。刻度对象的部分是您想要设计的标签。
因此,您需要找到徘徊点的“足够接近”刻度。 点与滴答的值并不完全相同,所以您需要定义满足您的距离。
function findTick(x, ticks, range) {
for (var tickValue in ticks) {
if (Math.abs(x - tickValue) <= range) {
return ticks[tickValue];
}
}
}
活动的,将采取适当的行动要点:如果你想使用CSS样式
events: {
mouseOver: function(e) {
var tick = findTick(this.x, this.series.xAxis.ticks, 300000);
this.selectedTick = tick;
if (tick) {
tick.label.css({
color:'#FF0000'
});
}
},
mouseOut: function(e) {
if (this.selectedTick) {
this.selectedTick.label.css({
color: '#565f76'
});
this.selectedTick = null;
}
}
}
最后一件事,那么你必须支持HTML标签。
labels: {
useHTML: true,
否则,您将对svg元素进行操作,该元素的style属性与html元素的样式不同。
非常感谢!它完美地解决了我的问题。 这有点奇怪,在文档中没有关于它的信息 –