在Highcharts列和饼图中悬停时，边框部分隐藏-Java 学习之路

当我将鼠标悬停在堆积条形图或饼图的某个部分上时，我希望该部分的所有部分都有一个黑色边框 . 但是，对于堆叠的柱形图和饼图，特别是悬停区段的一侧保留了白色边框，将其与下一个区段分开：

是否有Highcharts设置或CSS样式，以便在将鼠标悬停在该段上时，可以在该段周围显示边框？

图表设置和JSFiddle链接：

柱形图设置：

Highcharts.chart('container', {
  chart: {
    type: 'pie'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },

  plotOptions: {
    series: {
      states: {
        hover: {
          brightness: 0,
          borderColor: 'black',
          halo: false,
        }
      }
    }
  },

  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }]
});

饼图：http://jsfiddle.net/djpjtmzg/

饼图设置：

Highcharts.chart('container', {
  chart: {
    type: 'pie'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },

  plotOptions: {
    series: {
      states: {
        hover: {
          brightness: 0,
          borderColor: 'black',
          halo: false,
        }
      }
    }
  },

  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }]
});

1 回答

0
边框的某些部分不可见，因为它们与其他列的"regular"边界重叠 . 在非悬停状态下将 borderWidth 设置为0似乎可以解决此问题：
```
plotOptions: {
    series: {
        stacking: 'normal',
        borderWidth: 0, // regular border disabled
        states: {
            hover: {
                brightness: 0,
                borderColor: 'black',
                borderWidth: 1 // enable border on hover
            }
        }
    }
}
```
Live demo: http://jsfiddle.net/kkulig/1kh7kvqq/

API reference: https://api.highcharts.com/highcharts/plotOptions.column.borderWidth

编辑

我注意到Highcharts论坛上出现了更好的解决方案：https://forum.highcharts.com/highcharts-usage/stacked-bar-and-pie-border-on-hover-t39961/

它使用 mouseOver 事件来增加悬停元素的 zIndex .

Bottom border issue:

删除悬停系列的 "clip-path" SVG属性可修复问题：
```
events: {
    mouseOver: function() {
      this.update({
        zIndex: 1
      });
      this.group.attr({
        "clip-path": ""
      });
    }
  },
```
Live demo: http://jsfiddle.net/kkulig/p9cqzs3f/
回复于 2024-04-29T17:16:31+08:00

在Highcharts列和饼图中悬停时，边框部分隐藏

1 回答

编辑

相关问题