系列悬停以突出显示边框颜色

Question

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

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

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

您可以通过纯 CSS 实现简单的解决方案：updated fiddle.

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

但是，由于您无法更改 SVG 中的堆叠顺序，因此某些边框将隐藏在其他元素下。您也许可以通过一些额外的间距来解决这个问题。

Answer 2

默认的高光有白色的填充和描边，不透明度 = 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);
        }
    });

系列悬停以突出显示边框颜色

Series Hover to Highlight Border Color

javascript

kendo-ui

kendo-chart

已更新FIDDLE