Series Hover to Highlight Border Color

瘦欲@ 提交于 2020-01-05 15:24:31

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!