如何删除晕和Highcharts饼图之间的细白线 [英] How to remove fine white line between halo and Highcharts pie chart

问题描述

解决方案

在SVG中是抗锯齿的。您可以使用形状渲染 CSS选项来使用不同的选项： http://jsfiddle.net/0bpkrnd3/5/（ crispEdges 看起来更糟糕））

无论如何，你可以使用另一个解决方案，而不是 halo 。只需禁用 halo 并使用 point.events 更改切片的半径： http://jsfiddle.net/0bpkrnd3/6/

p>

 点：{
 events：{
 mouseOver：function（）{
 this.graphic。 attr（{
r：this.shapeArgs.r + 10 
}）; 
}，
 mouseOut：function（）{
 this.graphic.attr（{
 r：this.shapeArgs.r 
}）; 
} 
} 
}，
  

http://jsfiddle.net/0bpkrnd3/4/ demonstrates that there is a very fine white line between the hover halo of a Highcharts pie chart and the pie segment. The halo color is as the same as the hover color and its stroke width is 0.

pie: {
  shadow: false,
    borderWidth: 0,
    states: {
    hover: {
      color: '#ff7f00',
        brightness: 0,
        lineWidth: 0,
        halo: {
        size: 9,
          opacity: 1,
          attributes: {
          fill: '#ff7f00',
            'stroke-width': 0
        }
      }

    }
  }
}

解决方案

This is anty-aliasing in SVG. You can play around with different options using shape-rendering CSS option: http://jsfiddle.net/0bpkrnd3/5/ (crispEdges looks even worse ;) )

Anyway, there is another solution you can use, instead of halo. Simply disable halo and use point.events to change radius of the slice: http://jsfiddle.net/0bpkrnd3/6/

Code:

    point: {
      events: {
        mouseOver: function() {
          this.graphic.attr({
            r: this.shapeArgs.r + 10
          });
        },
        mouseOut: function() {
            this.graphic.attr({
            r: this.shapeArgs.r
          });
        }
      }
    },

这篇关于如何删除晕和Highcharts饼图之间的细白线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！