系列悬停突出显示边框颜色(Series Hover to Highlight Border Color)

系列悬停突出显示边框颜色(Series Hover to Highlight Border Color)

我有以下实现，实际上突出显示堆积条形图上的配对对象。

但是，我想知道是否有办法实现更明显的高亮效果。 例如，当悬停鼠标时，使条形配对条形堆栈边框变黑。

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

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

最满意答案

默认突出显示的填充和描边为白色，不透明度= 0.2。 因此，您可以找到具有此笔触不透明度的路径并将其更改为黑色：

$("#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); } });

更新了FIDDLE

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