Highcharts甜甜圈图定制

Question

I'm working with highcharts and aiming to make a chart similar to this:

Now I've been playing around with the whole ordeal for a while now and I've come been able to reach the following point: http://jsfiddle.net/ccjSy/24/

$(function () {
    $(document).ready(function () {
        var chart = null;               
        var categories = ['Body Fat', 'Lean Mass'],
            name = 'Body Fat vs. Lean Mass',
            data = [{
                y: 69,
                color: '#F0CE0C',
                drilldown: {
                    name: 'Body Fat', 
                    color: '#F0CE0C'
                }
            }, {
                y: 207,
                color: '#23A303',
                drilldown: {
                    name: 'Lean Mass' ,
                    color: '#23A303'
                }
            }];


        // Build the data array
        var browserData = [];
        for (var i = 0; i < data.length; i++) {

            // add browser data
            browserData.push({
                name: categories[i],
                y: data[i].y,
                color: data[i].color
            });

        }

        // Create the chart
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'donutchart',
                type: 'pie',
                spacingTop: 0
            },
            title: {
                text: 'Your Body Fat vs Lean Mass',
                style: {"color": '#7d7d7d'}
            },
            series: [{
                name: 'Weight',
                data: browserData,
                dataLabels: {
                    style: {
                        fontFamily: 'ArialMT',
                        fontSize: '15px',
                        fontWeight: 'bold',
                        color: '#7d7d7d'
                    }
                },
                innerSize: '70%'
            }],
            tooltip: {
                valueSuffix: ' lbs'
            },
            plotOptions: {
                series: {
                    cursor: 'pointer'
                }
            }
        });
    });
});

I am thinking of leaving the space empty in the donut chart and inserting a custom circle with the Weight labeling. However, I'm not certain how to tackle the following problems:
1) Leave more defined white spaces in between my two columns
2) How to properly align my two data labels? (As you can see in the model, they are in a straight line with neutral lines attached)
3) How to display the data underneath the two labels with both, the pounds and the percentage, as shown in the image.

Answer 1

Answering each of your three questions:

1. " More white space between columns? " -- add a plotOptions.pie.borderWidth element. The default value is 1. I used 5 to give it more white space.

2. " Properly align the two data labels? " -- You can compute a custom startAngle based on the two data values which will give you the correct angle to start with. Since you only have two data values in the series, that's easy.

   Calculate startAngle for pie chart

    var startAngle = 0 - (90 + (180 * (data[0].y / (data[0].y + data[1].y)))); 

   Notice that if you change the y value for the first data object, the "Body Fat" portion of the pie chart will still maintain it's correct position, even as the portion of the chart grows larger or smaller.

3. " Display data underneath the two labels with custom formatting? " -- use plotOptions.pie.format to apply custom formatting to the pie value labels.

    format: '<div style="position: relative; top: -20px; text-align: center">{point.name}<br><b><span style="font-size: 29px">{point.percentage:.0f}%</span></b> ({point.y} lbs)</div>' 

Here's a working JSFiddle to see the results. You'll still need to add a dark gray circle behind the pie chart and add the "Total Weight" text but that shouldn't be too difficult.

Since I'm sure you'll be wondering about this, I should mention that there's a lot of white space under the pie chart title because it's leaving enough room for other labels that may appear above or below the pie. Since you're only using two values that will always be on the left/right sides of the pie chart, that doesn't change the fact that HighCharts is preparing to have other labels that may need to be displayed in the surrounding area.