Highcharts环形饼图白色扇区无悬停指示器问题求助

这问题我之前也踩过坑！确实是Highcharts默认的悬停高亮逻辑搞的鬼——它会自动取切片本身颜色的浅色调来生成悬停效果，白色切片的浅色调几乎还是白色，和背景混在一起就完全看不见了。

不过解决起来很简单，我们可以直接自定义悬停时的颜色，完全不受切片本身颜色的限制，有两种常用方法：

方法一：全局统一设置所有切片的悬停高亮颜色 #

如果希望所有切片悬停时都用同一个对比色（比如浅灰色），可以在plotOptions.pie.states.hover里直接指定color参数，覆盖默认的亮度调整逻辑：

document.addEventListener("DOMContentLoaded", function() { 
  var chart1 = new Highcharts.Chart({ 
    colors: ['#00aeef', '#7FD6F7', '#ffffff'], 
    chart: { 
      type: 'pie', 
      renderTo: 'container' 
    }, 
    title: { 
      verticalAlign: 'middle', 
      floating: true, 
      text: 'CENTERED<br>TEXT' 
    }, 
    plotOptions: { 
      pie: { 
        innerSize: '80%',
        states: {
          hover: {
            // 自定义悬停高亮颜色，这里用浅灰色示例
            color: '#cccccc'
          }
        }
      } 
    }, 
    series: [{ 
      data: [ 
        {name:'Firefox', y:30}, 
        {name:'IE7', y:35}, 
        {name:'IE6', y:35, borderColor: '#00aeef'} 
      ] 
    }] 
  }); 
});

方法二：仅针对白色切片单独设置悬停颜色 #

如果只想让白色切片的悬停效果特殊，其他切片保持默认的亮度调整，可以直接在对应的数据点里添加states.hover配置：

document.addEventListener("DOMContentLoaded", function() { 
  var chart1 = new Highcharts.Chart({ 
    colors: ['#00aeef', '#7FD6F7', '#ffffff'], 
    chart: { 
      type: 'pie', 
      renderTo: 'container' 
    }, 
    title: { 
      verticalAlign: 'middle', 
      floating: true, 
      text: 'CENTERED<br>TEXT' 
    }, 
    plotOptions: { 
      pie: { 
        innerSize: '80%' 
      } 
    }, 
    series: [{ 
      data: [ 
        {name:'Firefox', y:30}, 
        {name:'IE7', y:35}, 
        {
          name:'IE6', 
          y:35, 
          borderColor: '#00aeef',
          states: {
            hover: {
              // 给白色切片单独设置悬停颜色
              color: '#cccccc'
              // 也可以用brightness参数调暗，比如brightness: -0.2，会生成深一点的灰色
            }
          }
        } 
      ] 
    }] 
  }); 
});

两种方法都能完美解决白色切片悬停无指示器的问题，你可以根据自己的需求选其中一种就行~

内容的提问来源于stack exchange，提问作者Abhinav