系列悬停高亮边框颜色(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

Answer 1:

默认的亮点有填充和不透明度= 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

Answer 2:

您可以通过实现纯CSS一个天真的解决方案： 更新小提琴 。

g[clip-path] path + path {
    stroke: #000;
    stroke-opacity: 1;
    stroke-width: 1;
}

但是，因为你不能在SVG更改堆叠顺序，有些边框将在其他元素隐藏。 您可能能够解决与一些额外的空间。

文章来源: Series Hover to Highlight Border Color