Highcharts甜甜圈图定制

Question

我正在使用 highcharts 并打算制作一个类似于此的图表：

现在我已经玩了一段时间的整个考验，我已经能够达到以下几点：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'
                }
            }
        });
    });
});

我正在考虑将圆环图中的空间留空，并插入一个带有权重标签的自定义圆圈。 但是，我不确定如何解决以下问题：
1) 在我的两列之间留下更多明确的空白
2) 如何正确对齐我的两个数据标签？ （正如您在模型中看到的，它们在一条直线上，并附有中性线）
3) 如图所示，如何在两个标签下方同时显示磅和百分比的数据。

Answer 1

回答你的三个问题：

1. “列之间有更多空白？”——添加plotOptions.pie.borderWidth 元素。默认值是 1。我用 5 给它更多的空白。

2. "正确对齐两个数据标签？" -- 您可以根据两个数据值计算自定义startAngle，这将为您提供正确的起始角度。由于系列中只有两个数据值，这很容易。

   计算饼图的起始角度

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

   请注意，如果您更改第一个数据对象的 y 值，即使图表部分变大或变小，饼图的“体脂”部分仍将保持其正确位置。

3. "在两个标签下方显示自定义格式的数据？" -- 使用plotOptions.pie.format 将自定义格式应用于饼图值标签。

   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>'
   

这是一个有效的JSFiddle 以查看结果。您仍然需要在饼图后面添加一个深灰色圆圈并添加“总重量”文本，但这应该不会太难。

因为我确定您会对此感到疑惑，所以我应该提一下，饼图标题下方有很多空白区域，因为它为可能出现在饼图上方或下方的其他标签留出了足够的空间。由于您只使用两个始终位于饼图左侧/右侧的值，这不会改变 HighCharts 准备在周围区域显示其他标签的事实。