在 highcharts 中，我试图使当用户选择或将鼠标悬停在饼图的切片上时，该切片会产生沿 z 轴（朝向用户）上升的效果。我试图通过 css 设置阴影过滤器并使切片的边框更宽（填充颜色相同）来实现此目的。然而，我面临的问题是切片仍然可以位于其他切片下方，因此所选切片及其阴影将位于这些切片后面，因此看起来仍然位于它们下方。进一步说明：
Since red was added last, it looks good when selected - it's above the other pie slices.
However, blue gets stuck behind the other slices when selected, because it was first in the array.
我知道 SVG 会按照 DOM 中的顺序堆叠元素，而不是使用 z-index 等 css 属性，因此一个想法是删除选定的点，然后再次附加它。然而，这会重新排列整个馅饼，因此它不是替代方案。
还有其他我没有想到的解决方案吗？
document.addEventListener('DOMContentLoaded', function() {
const chart = Highcharts.chart('container', getChartOptions())
})
/**
* Gets the highchart options for the pie chart.
* Each data point has event handlers added to them
* To set the correct border widths
*/
function getChartOptions() {
return {
series: [{
type: 'pie',
innerSize: '80%',
allowPointSelect: true,
slicedOffset: 0,
states: {
// Remove default hover settings
hover: {
halo: null,
brightness: 0,
},
},
data: getMockData()
}],
};
}
/**
* Generates mock data for highcharts
* Each data point has event handlers set up in the `events` property
*/
function getMockData() {
return [{
color: '#aaf',
borderColor: '#aaf',
y: 4,
events: getEventHandlers(),
},
{
color: '#afa',
borderColor: '#afa',
y: 3,
events: getEventHandlers(),
},
{
color: '#faa',
borderColor: '#faa',
y: 8,
events: getEventHandlers(),
},
]
}
/**
* Event handlers for highchart data points.
* The border width of the slice is set to 20 for `select` and `mouseOver`
* The border width of the slice is set to 0 for `unselect` and `mouseOut` (except when the event is selected, in which case `mouseOut` shouldn't do anything)
*/
function getEventHandlers() {
return {
select: (obj) => {
obj.target.update({
borderWidth: 20
});
},
unselect: (obj) => {
obj.target.update({
borderWidth: 0
});
},
mouseOver: (obj) => {
obj.target.update({
borderWidth: 20
});
},
mouseOut: (obj) => {
if (!obj.target['selected']) {
obj.target.update({
borderWidth: 0
});
}
},
};
}/* A drop shadow is the effect I want to accomplish, but it should be above the other slices. */
.highcharts-pie-series .highcharts-point-hover,
.highcharts-pie-series .highcharts-point-select {
filter: drop-shadow(0 0 10px black);
}<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width:100%; height:400px;"></div>要在悬停时获得额外的边框，您可以触发 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/ https://jsfiddle.net/BlackLabel/u4ypbsrk/
API参考：
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr,
https://api.highcharts.com/class-reference/Highcharts.CSSObject https://api.highcharts.com/class-reference/Highcharts.CSSObject,
https://api.highcharts.com/highcharts/plotOptions.pie.point.events https://api.highcharts.com/highcharts/plotOptions.pie.point.events