Highcharts 甜甜圈标签溢出容器答案

【问题标题】：Highcharts donut label overflow containerHighcharts 甜甜圈标签溢出容器
【发布时间】：2014-06-24 22:19:41
【问题描述】：

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

            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/

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

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

【问题讨论】：

标签： highcharts

【解决方案1】：

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

根据docs

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

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

【讨论】：

谢谢马克。事实上，这正是我试图避免的结果。我喜欢自动调整“外部”切片的大小。我需要完成的是使“内部”饼图也根据缩放的“外部”饼图调整大小。有什么想法吗？

【解决方案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 @@ 位置 = [pick(centerOption[0], '50%'), pick(centerOption[1], '50%'), options.size || '100%', options.innerSize || 0], minimumSize = mathMin(plotWidth, plotHeight), 是百分比； + + /** + * 允许图表（饼图）指定相对于另一个系列的大小。在 + * 这种情况下，只需复制父级的中心位置，并缩放 + * 半径。 + */ + if ( options.relativeSize ) { + parentPositions = chart.series[options.relativeSize.parentSeries].center; + 职位[0] = 父职位[0]； + 职位[1] = 父职位[1]； + 位置[2] = options.relativeSize.size * parentPositions[2]; + + 返回地图（位置，函数（长度，i）{ + 返回位置[i] + }); + } 返回地图（位置，函数（长度，i）{ isPercent = /%$/.test(length);

那么，在配置甜甜圈的时候：

系列： [{ 名称：'浏览器'，数据：浏览器数据，中心：['50%', '50%'], 数据标签：{ 格式化程序：函数（）{ 返回 this.y > 5 ？ this.point.name : null; }, 白颜色'，距离：-30 } }, { 名称：'版本'，数据：版本数据，相对大小：{ parentSeries: 0, // 父系列的索引 size: 0.75 // 父饼图的 75% } 数据标签：{ 格式化程序：函数（）{ // 仅在大于 1 时显示返回 this.y > 1 ？ ''+ this.point.name +': '+ this.y +'%' : null; } } }]

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

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

【讨论】：

【解决方案3】：

很遗憾，此选项不可用，因此我建议您在 uservoice 上发布您的请求

【讨论】：