Question

我有一个最简单的高图甜甜圈图表问题。我的问题是这个圆环图的默认半径是多少。我没有在任何地方指定半径，但似乎在某处设置了默认半径。我无法弄清楚这个半径是如何设置的，并且想知道是否有人可以帮我理解这个半径是如何设置的。我确实通过api参考，但找不到这个信息。不确定我是否错过了什么。

这是demo

$(function () {
 $('#container').highcharts({
    chart: {
        type: 'pie'
    },

    plotOptions: {
        pie: {
            startAngle: 90,
            animation: false,
            innerSize: '60%'
        }
    },

    series: [{
        data: [
            ['Firefox',   44.2],
            ['IE7',       26.6],
            ['IE6',       20],
            ['Chrome',    3.1],
            ['Other',    5.4]
        ]
    }]
});

Answer 1

它似乎没有半径选项。但有一个选择：

宽度：数量图表的显式宽度。默认情况下，宽度是根据包含元素的偏移宽度计算的。试一试：800px宽

请参阅此link

Answer 2

没有半径选项，但是there is a diameter。您可以以像素（由数字给出）或以图表区域的百分比（以字符串'N%'形式）表示：

size：String | Number饼图相对于绘图区域的直径。可以是百分比或像素值。像素值为整数。默认行为（截至3.0）是缩放到绘图区域并为绘图区域内的数据标签提供空间。作为一个因此，当更新点时，饼图的大小可能会有所不同数据标签更多。在这种情况下，最好设置一个固定值，例如“75％”。默认为。

Here's your fiddle饼图占图表区域的150％。

Answer 3

您无法使用选项或API查找大小值，因为它似乎没有任何内容。似乎你无法找到它，例如：

var chart = $('#container').highcharts();
console.log(chart);

并检查属性。您会发现size设置为null。

你可以找出检查DOM svg元素的大小。为了让我的工作更轻松，我改变了选项

innerSize: 180

找出以下svg元素（注意：它不是圆元素）：

...
<path fill="#8bbc21" d="M 532.7575883045118 30.763342348475817 A 140 140 0 0 1 685.1378163408548 95.11881271952285 L 642.2314533619781 120.79066531969326 A 90 90 0 0 0 544.2727353386148 79.41929150973445 Z" stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round" transform="translate(0,0)" visibility="visible"></path>
<path fill="#910000" d="M 685.2096374472518 95.23898645643143 A 140 140 0 0 1 696.8833100589593 120.0234896156345 L 649.7821278950453 136.8008147529079 A 90 90 0 0 0 642.2776240732333 120.86791986484879 Z" stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round" transform="translate(0,0)" visibility="visible"></path>
...

这些是构建饼图甜甜圈切片的svg路径元素。 A 140 140...和A 90 90...是椭圆弧命令，90,90是内部大小的rx，ry，外部大小是140,140。因此，在这种情况下，半径为140。

我不知道它是如何精确计算的，但半径是根据您的容器大小和所有不同的边距计算，绘制边框，间距...如果您没有使用选项size设置大小。

如何找到饼图/圆环图的半径

3 个答案: