如何在c3.js饼图中实现标签显示在图表区域外部？

Hey there! I get that you want to move your C3.js pie chart labels outside the chart area, and it’s frustrating when the official docs don’t spell this out clearly. Let’s fix this together.

First, a quick note: Your existing axis configuration doesn’t apply to pie charts—those settings are meant for axis-based charts like line or bar graphs. We’ll focus on the pie.label options and leverage C3’s underlying D3.js integration to adjust label positions.

Here’s a modified version of your code that moves labels outside the pie:

var chart = c3.generate({
    data: {
        columns: data, // Your existing data array
        type: 'pie'
    },
    pie: {
        label: {
            show: true,
            // Optional: Customize label text format
            format: function(value, ratio, id) {
                return `${id}: ${value}`;
            }
        }
    },
    onrendered: function() {
        // Grab all pie chart label elements using D3
        const labels = d3.selectAll('.c3-chart-arcs-text');
        
        labels.each(function(d) {
            // Get the parent arc element to access its position data
            const arc = d3.select(this.parentNode);
            const arcData = arc.datum();
            
            // Define how far outside the pie you want labels to sit (adjust this value as needed)
            const outerOffset = 50;
            const outerRadius = arcData.radius + outerOffset;
            
            // Calculate new x/y positions by scaling the arc's centroid to the outer radius
            const newX = (arcData.centroid[0] / arcData.radius) * outerRadius;
            const newY = (arcData.centroid[1] / arcData.radius) * outerRadius;
            
            // Update the label's position and text alignment
            d3.select(this)
                .attr('x', newX)
                .attr('y', newY)
                // Align text so it doesn't overlap the pie: left align for right-side labels, right align for left-side
                .attr('text-anchor', newX > 0 ? 'start' : 'end');
        });
    }
});

How this works: #

• onrendered callback: This runs after the chart finishes rendering, so we can safely modify the label elements.
• D3 selection: We use D3 (which C3 is built on) to target all pie chart labels via their class .c3-chart-arcs-text.
• Position calculation: Each arc’s datum() gives us its centroid (center point) and radius. We scale the centroid coordinates to a larger radius to move labels outside the pie.
• Text alignment: Adjusting text-anchor ensures labels sit cleanly next to the pie instead of overlapping it.

To polish the labels further, add this CSS to your stylesheet:

.c3-chart-arcs-text {
    font-size: 14px;
    fill: #2d3748; /* Dark gray for readability */
    /* Optional: Add a text shadow to make labels stand out against the pie */
    text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}

That should do the trick! You can tweak the outerOffset value to move labels closer or farther from the pie as needed.

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