Highcharts -使用选定的饼图切片获得三维效果

gxwragnw 于 2022-11-11 发布在 Highcharts

关注(0)|答案(2)|浏览(167)

在highcharts中，我试图使用户选择或悬停在饼图的切片上时，该切片产生在z轴向上移动的效果我尝试通过css设置一个阴影过滤器来实现这一点，并使切片的边界更宽（填充的颜色相同）。然而，我面临的问题是切片仍然可以低于其他切片，因此所选切片及其阴影将位于这些切片的后面，因此看起来仍在它们的下面。
由于红色是最后添加的，因此选中时效果很好-它位于其他饼图切片的上方。x1c 0d1x
但是，蓝色在被选中时会卡在其他切片后面，因为它是数组中的第一个。

我知道SVG会按照元素在DOM中的顺序来堆叠元素，而不是使用css属性（如z-index），所以一个想法是删除选定的点，然后再次追加它。然而，这会重新排列整个饼图，所以这不是一个替代方案。
我还能想到别的解决办法吗？
第一个

highcharts

来源：https://stackoverflow.com/questions/70623317/highcharts-getting-a-3d-effect-with-selected-pie-chart-slices

2条答案

按热度按时间

t98cgbkg1#

要在悬停时获得额外的边框，可以触发到point.events并添加SVG属性。

plotOptions: {
    pie: {
      type: 'pie',
      innerSize: '80%',
      allowPointSelect: true,
      slicedOffset: 0,
      states: {
        hover: {
          halo: null,
          brightness: 0,
        },
      },
      point: {
        events: {
          mouseOver: (obj) => {
            obj.target.graphic.attr({
                'stroke-width': 50,
                stroke: obj.target.color,
                zIndex: 3,
                filter: 'drop-shadow(0 0 10px black)'
              }).css({
                borderRadius: 20
              })
              .add();
          },
          mouseOut: (obj) => {
            obj.target.graphic.attr({
                'stroke-width': 1,
                stroke: obj.target.color,
                filter: 'transparent'
              }).css({
                borderRadius: 0
              })
              .add();
          },
        }
      }

    }
  },

现场演示：
https://jsfiddle.net/BlackLabel/u4ypbsrk/
API参考：
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr,
https://api.highcharts.com/class-reference/Highcharts.CSSObject，
https://api.highcharts.com/highcharts/plotOptions.pie.point.events

赞(0）回复(0）举报 2022-11-11

cdmah0mi2#

显然，从事件中获取的目标有一个名为graphic的属性，它是切片的Highcharts.SVGElement的句柄。有了这个属性，我们可以调用.toFront()函数，它将改变DOM顺序，而不改变甜甜圈中切片的顺序。
第一个

赞(0）回复(0）举报 2022-11-11