Question

我正在尝试使用（长）标签创建圆环图。图表的容器很小（和动态）。我一直遇到外部图表的标签被截断的问题。

            series: [{
            name: 'Browsers',
            data: browserData,
            size: '65%',
            dataLabels: {
                formatter: function() {
                    return this.y > 5 ? this.point.name : null;
                },
                color: 'white',
                distance: -30
            }
        }, {
            name: 'Versions',
            data: versionsData,
            size: '85%',
            innerSize: '65%',
            dataLabels: {
                formatter: function() {
                    // display only if larger than 1
                    return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%'  : null;
                }
            }
        }]

jsfiddle：http://jsfiddle.net/sw99B/

我想要实现的是自动饼图大小，就像简单的馅饼一样：

            series: [{
            name: 'Versions',
            data: versionsData,
            dataLabels: {
                formatter: function() {
                    // display only if larger than 1
                    return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%'  : null;
                }
            }
        }]

jsfiddle：http://jsfiddle.net/4P4D5/

甜甜圈的问题在于我必须指定内部和外部的大小。外甜甜圈。这导致制作甜甜圈的两个馅饼具有固定的半径。理想情况下，我会把内饼占外部的百分比;并让外面的馅饼有一个自动尺寸。

有关如何完成此任务的任何建议？

Answer 1

dataLabels: formatter...仅控制是否显示更薄切片的数据标签。它不控制饼图的大小。这是由series:[{size参数指定的。在您的示例中，它设置为容器的85％，这会导致溢出。

根据docs

默认行为（截至3.0）是缩放到绘图区域和为绘图区域内的数据标签留出空间。

如果你comment out the size on your example，它确实挤进了标签，但我不确定你会不会喜欢它的外观。

Answer 2

highcharts.src.js v4.0.1的以下小补丁实现了所需的行为：


    --- highcharts.src.orig.js  2014-04-24 08:25:52.000000000 +0000
    +++ highcharts.src.js   2014-06-24 13:57:42.957605307 +0000
    @@ -12167,6 +12167,22 @@
                positions = [pick(centerOption[0], '50%'), pick(centerOption[1], '50%'), options.size || '100%', options.innerSize || 0],
                smallestSize = mathMin(plotWidth, plotHeight),
                isPercent;
    +
    +       /**
    +        * Allow a chart (pie) to specify a size relative to another series. In
    +        * that case, simply copy the center position of the parent, and scale
    +        * the radius.
    +        */
    +       if ( options.relativeSize ) {
    +           parentPositions = chart.series[options.relativeSize.parentSeries].center;
    +           positions[0] = parentPositions[0];
    +           positions[1] = parentPositions[1];
    +           positions[2] = options.relativeSize.size * parentPositions[2];
    +
    +           return map(positions, function (length, i) {
    +               return positions[i]
    +           });
    +       }

            return map(positions, function (length, i) {
                isPercent = /%$/.test(length);

然后，在配置甜甜圈时：

            series: [{
            name: 'Browsers',
            data: browserData,
            center: ['50%', '50%'],
            dataLabels: {
                formatter: function() {
                    return this.y > 5 ? this.point.name : null;
                },
                color: 'white',
                distance: -30
            }
        }, {
            name: 'Versions',
            data: versionsData,
            relativeSize: {
                parentSeries: 0, // index of parent series
                size: 0.75       // 75% of parent pie
            }
            dataLabels: {
                formatter: function() {
                    // display only if larger than 1
                    return this.y > 1 ? ''+ this.point.name +': '+ this.y +'%'  : null;
                }
            }
        }]

请注意，父（外）饼必须在容器中显式居中，否则在某些情况下，两个饼可能不是同心的。

另外，要求指定系列的索引显然不是理想的，但是在严格控制的图形中（如甜甜圈），它似乎可以完成这项工作。

Answer 3

很遗憾，此选项不可用，因此我建议您在uservoice

上发布您的请求

Highcharts甜甜圈标签溢出容器

3 个答案: