问题
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);
}
Here is JSFIDDLE
回答1:
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);
}
});
Updated FIDDLE
回答2:
You can achieve a naïve solution via pure CSS: updated fiddle.
g[clip-path] path + path {
stroke: #000;
stroke-opacity: 1;
stroke-width: 1;
}
However, since you can't change stacking order in SVG, some borders will be hidden under other elements. You may be able to solve that with some additional spacing.
来源:https://stackoverflow.com/questions/30632657/series-hover-to-highlight-border-color