【问题标题】:How to remove fine white line between halo and Highcharts pie chart如何去除晕圈和 Highcharts 饼图之间的细白线
【发布时间】:2015-12-16 10:38:03
【问题描述】:

http://jsfiddle.net/0bpkrnd3/4/ 表明在 Highcharts 饼图的悬停光环和饼图段之间有一条非常细的白线。光晕颜色与悬停颜色相同,笔划宽度为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
        }
      }

    }
  }
}

【问题讨论】:

    标签: highcharts


    【解决方案1】:

    这是 SVG 中的抗锯齿。您可以使用shape-rendering CSS 选项来尝试不同的选项:http://jsfiddle.net/0bpkrnd3/5/crispEdges 看起来更糟;))

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

    代码:

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

    【讨论】: