使用Highcharts实现点击饼图扇区修改半径及覆盖相邻扇区的方法

Hey there! Let's work through your two pie chart customization needs with Highcharts. I’ve handled similar tweaks before, so here’s a step-by-step breakdown with code to make it work:

1. Adjust Radius of Clicked Pie Slice #

To change the radius of a slice when clicked (and reset others when a new slice is selected), we’ll use the point.events.click handler to update the slice’s radius property. We’ll also track the currently selected slice to revert its style when another slice is clicked.

2. Make Clicked Slice Overlap Adjacent Slices #

The key here is controlling the z-index of the clicked slice. By setting its zIndex higher than all other slices, it will render on top and overlap neighboring slices. We’ll save the original z-index of each slice to restore it later.

Full Working Code Example #

// Initialize the chart
Highcharts.chart('container', {
    chart: {
        type: 'pie',
        spacing: [0, 0, 0, 0] // Optional: Adjust spacing if needed
    },
    plotOptions: {
        pie: {
            radius: 100, // Default radius for slices
            allowPointSelect: false, // Disable default select behavior (we'll handle it manually)
            point: {
                events: {
                    click: function() {
                        const chart = this.series.chart;
                        const defaultRadius = chart.series[0].options.radius;

                        // Step 1: Reset previously selected slice (if any)
                        if (chart.activeSlice) {
                            chart.activeSlice.update({
                                radius: defaultRadius,
                                zIndex: chart.activeSlice.originalZIndex
                            }, false); // Don't redraw yet to optimize performance
                        }

                        // Step 2: Save original z-index of current slice
                        this.originalZIndex = this.zIndex;

                        // Step 3: Update current slice with new radius and higher z-index
                        this.update({
                            radius: defaultRadius + 30, // Increase radius by 30 (adjust as needed)
                            zIndex: chart.series[0].data.length // Set to highest possible z-index
                        }, true); // Redraw the chart now

                        // Step 4: Track the active slice for future resets
                        chart.activeSlice = this;
                    }
                }
            }
        }
    },
    series: [{
        name: 'Sample Data',
        data: [
            { name: 'Slice 1', y: 30 },
            { name: 'Slice 2', y: 25 },
            { name: 'Slice 3', y: 20 },
            { name: 'Slice 4', y: 15 },
            { name: 'Slice 5', y: 10 }
        ]
    }]
});

Key Details Explained #

• Radius Adjustment: We define a default radius, then increase it by a fixed value (30 in the example) for the clicked slice. When another slice is clicked, we revert the previous slice back to the default radius.
• Z-Index Control: By setting the clicked slice’s zIndex to the total number of slices, we ensure it’s rendered on top of all others. This makes it naturally overlap adjacent slices without needing to modify the neighbors directly.
• Performance: Using false in the first update() call delays redrawing until we’ve made all necessary changes, which keeps the interaction smooth.

If you need more precise control over how the slice overlaps (e.g., slightly shrinking adjacent slices), you could add logic to find the previous/next slices via this.index and adjust their properties too. For most cases though, the z-index trick works perfectly.

内容的提问来源于stack exchange，提问作者Mukesh Kumar Bijarniya