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

回答你的三个问题：

＆＃34; 列之间的空格更多？＆＃34; - 添加plotOptions.pie.borderWidth元素。默认值为1.我使用5来增加空白区域。
＆＃34; 正确对齐两个数据标签？＆＃34; - 您可以根据两个数据值计算自定义startAngle，这将为您提供正确的角度。由于系列中只有两个数据值，因此很容易。

计算饼图的startAngle
```
var startAngle = 0 - (90 + (180 * (data[0].y / (data[0].y + data[1].y))));
```
请注意，如果您更改第一个数据对象的y值，那么＆＃34; Body Fat＆＃34;饼图的一部分仍将保持正确的位置，即使图表的部分变大或变小。

＆＃34; 使用自定义格式在两个标签下方显示数据？＆＃34; - 使用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以查看结果。您还需要在饼图后面添加一个深灰色圆圈并添加＆＃34;总重量＆＃34;文字但不应该太难。

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

Highcharts甜甜圈图表定制

1 个答案: