系列悬停以突出显示边框颜色 [英] Series Hover to Highlight Border Color
本文介绍了系列悬停以突出显示边框颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我具有以下实现,该实现实际上在堆叠的条形图上突出显示了成对的对象.
I have the following implementation which actually highlight paired objects on the stacked bar chart.
但是,我想知道是否有一种方法可以实现更明显的高光效果.例如,当鼠标悬停时,使成对的条形成对的条形堆叠边框为黑色.
However, I would like to know whether or not there is a way to implement more pronounced highlight effect. For example make bar paired bar stacks border black when hover the mouse.
seriesHover: function (e) {
var clickedSeries = e.series.name;
var chart = $("#chart").data("kendoChart");
for (var i = 0; i < chart.options.series.length; i++) {
chart.toggleHighlight(false, chart.options.series[i].name);
}
chart.toggleHighlight(true, clickedSeries);
}
这是 JSFIDDLE
Here is JSFIDDLE
推荐答案
默认高光具有不透明度= 0.2的白色填充和笔触.因此,您可以找到具有这种笔触不透明度的路径并将其更改为黑色:
The default highlight has fill and stroke of white with opacity = 0.2. Therefore you can find paths with this stroke opacity and change them to black:
$("#chart g path").each(function (idx){
var op = $(this).attr('stroke-opacity');
if (op == 0.2){
$(this)
.attr('stroke', '#000')
.attr('stroke-opacity', 1)
.attr('stroke-width', 2);
}
});
这篇关于系列悬停以突出显示边框颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文