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

【问题标题】：How to find the radius of the piechart/donut chart如何找到饼图/圆环图的半径
【发布时间】：2014-03-08 02:20:17
【问题描述】：

我有一个最简单的 highchart 圆环图问题。我的问题是这个圆环图的默认半径是多少。我没有在任何地方指定半径，但似乎在某处设置了默认半径。我无法弄清楚这个半径是如何设置的，并且想知道是否有人可以帮助我了解这个半径是如何设置的。我确实通过了 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]
        ]
    }]
});

【问题讨论】：

标签： javascript highcharts

【解决方案1】：

您无法使用选项或 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 设置大小。

【讨论】：

哦，这很酷。非常感谢。你碰巧知道我在哪里可以找到关于这些路径元素的更多解释。我确实在 chrome 开发人员工具中查看了这些元素，但无法弄清楚它们各自代表什么。
有很多关于 SVG 的资源。一是书SVG Essentials。

【解决方案2】：

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

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

参考这个link

【讨论】：

【解决方案3】：

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

size: String|Number 饼图相对于绘图区域的直径。可以是百分比或像素值。像素值给出为整数。默认行为（从 3.0 开始）是缩放到绘图区域并为绘图区域内的数据标签留出空间。作为一个因此，饼图的大小可能会在更新点时发生变化，并且数据标签更多。在这种情况下，最好设置一个固定值，例如“75%”。默认为 .

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

【讨论】：