系列悬停突出显示边框颜色(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
更多推荐
发布评论