Highcharts: 饼图数据标签在画布外绘制

创建于 2011-02-17 · 32评论 · 资料来源: highcharts/highcharts

饼图在尝试定位时没有考虑数据标签的长度，因此它们通常会部分呈现在画布之外。我能够使用图表上的边距来给自己足够的填充，但这不是修复它的方法，

Highcharts Enhancement

资料来源

pplante

最有用的评论

为什么这个问题被关闭了？ 2011年就开始了，2017年我还是有这个问题。

Floriferous 于 2017-02-07

👍3

所有32条评论

我也遇到了这个问题-我认为这应该被标记为错误而不是增强，因为该软件无法按预期工作

rowanmanning 于 2011-10-28

👍1

+1 在这个问题上，馅饼可以根据数据标签自动调整大小吗？

steeve 于 2011-12-30

pestipeti 于 2012-02-07

也在这里+1。我的公司最近购买了使用该软件的许可证。修复此错误将有很大帮助。 Highslide 的任何人都可以优先/评论这里发生的事情吗？这已经开了一年了。

ghost 于 2012-05-09

+1。兰德尔莫雷所说的 - 完全相同的情况。另外，同意rowanmanning，砍掉东西是一个错误。

htrufan 于 2012-06-13

这个错误是在 2 年前打开的。任何进展？如果标签被切掉，饼图对我们毫无用处。
它仍然被标记为增强。

htrufan 于 2012-09-04

检测数据标签所需的空间非常复杂，我们
在这个时候不会把它放在首位。您需要添加适当的
边距和饼图大小来避免这种情况。还可以设置宽度样式
dataLabels 强制自动换行。

TorsteinHonsi 于 2012-09-04

bobbymiller 于 2012-09-05

我也有这个问题。

ghost 于 2012-10-08

这应该被标记为错误，增强意味着它可以正常工作但可以改进，这显然不是这种情况。
+1

嘿@highslide-software，有什么解决方案吗？基于画布的图表可以成为一种可能的解决方案吗？

Yahav 于 2012-10-09

k2xl 于 2012-10-11

+1 我也有这个问题。

jvanwinkle 于 2012-10-19

我也是

infacq 于 2012-10-22

好的各位，我会想办法解决的。我们需要一些递归逻辑来绘制数据标签，找出它们是否溢出，然后递归地减小饼图的大小，直到所有标签都在里面。

TorsteinHonsi 于 2012-10-25

这是我们所做的：

将默认饼图大小选项更改为 null。当饼图大小为空时，饼图会自动适应绘图区域。当数据标签被禁用时，饼图完全填满绘图区域。启用数据标签时，数据标签也适合绘图区域。
将默认饼图中心选项更改为 [null, null]。 X 和 Y 选项的居中是独立处理的。 Null 表示自动，因此只要大小也为空，饼图将适合绘图区域。
添加了一个选项 minSize。当大小为空时，它不会低于此。

演示：

http://jsfiddle.net/highcharts/CjgLg/ 。抓住右下角的调整大小手柄，观察自动调整大小的处理方式。
http://jsfiddle.net/highcharts/9tqSn/ 。作为动态大小的结果，饼图本身的大小可能会根据存在的数据标签而改变。请注意，在此演示中显示和隐藏切片时它是如何变化的。

感谢所有评论！

TorsteinHonsi 于 2012-10-26

我有一堆非常长的数据标签（我不能让它们更短），这可能会导致图表非常小。如果标签超过一定宽度，有没有办法让标签自动换行到两三行？

谢谢！

ghost 于 2012-10-26

是的，我认为您可以将 dataLabels.style.width 设置为“100px”。

TorsteinHonsi 于 2012-10-29

非常感谢 - 是否估计何时将其合并到“主”或发布中？

bobbymiller 于 2012-11-01

我有一个案例，我在一页上以 2x2 格式显示多个饼图。每个饼图都有相同的标签，但数据不同。

因此，此解决方案可能会生成 4 个不同大小的派，这是不可取的 - 有没有办法避免这种情况并仍然使标签适合？我真正想要的是调整数据标签以适应图表，而不是饼图。先谢谢了。

bobbymiller 于 2012-11-01

这将在 Highcharts 3.0 发布时发布并合并到 master 中，希望在圣诞节之前。

在同一个图表中有多个饼图的情况下，您仍然需要使用绝对大小。从理论上讲，我认为您所描述的可以通过调整每个饼图来解决，然后为所有饼图使用最小的饼图大小。但我不确定这将如何在实践中发挥作用，因为馅饼是在情节区域内调整的，而不是相对于彼此。

TorsteinHonsi 于 2012-11-02

@highslide-software 请注意，由于 highcharts 的 CDN，上述示例无法正常工作。我已经为任何对它们感兴趣的人修复了小提琴示例：

http://jsfiddle.net/CjgLg/13/ 。抓住右下角的调整大小手柄，观察自动调整大小的处理方式。
http://jsfiddle.net/9tqSn/11/ 。作为动态大小的结果，饼图本身的大小可能会根据存在的数据标签而改变。请注意，在此演示中显示和隐藏切片时它是如何变化的。

感谢您的修复！ +1 :)

carlosruana 于 2013-04-03

我对甜甜圈上的这种自动调整大小功能有疑问。它适用于单个馅饼，但当用于 2 系列馅饼（即甜甜圈）时，内馅饼和外馅饼都会独立调整大小。特别是，当内部饼图没有蜘蛛状图例而外部饼图确实有它们时，内部饼图根本不会调整大小，而外部饼图确实会调整大小以适合视口。这会导致图表失真（通常内部饼图比外部饼图更宽，完全破坏了图表的外观和语义）。

您是否有机会扩展此修复程序以支持甜甜圈，作为一个大馅饼？

这是一个例子： http :

看起来是外面的馅饼（绿色/蓝色）实际上是里面的馅饼，看起来里面有更多切片的馅饼实际上是外面的馅饼。

谢谢！

mmarchetta 于 2013-05-08

我对甜甜圈图也有同样的问题，标签延伸到图表之外。

shanSyapse 于 2015-06-06

这个案例展示了标签是如何被剪裁的： http :

TorsteinHonsi 于 2015-06-09

我一直在研究这个问题，并探索了将省略号添加到溢出数据标签的逻辑。它目前在静态图表上运行良好，但在动态调整大小或更新图表时会中断。

可以在http://jsfiddle.net/highcharts/7okk430t/1/看到现场演示

..这是差异：

diff --git a/js/parts/DataLabels.js b/js/parts/DataLabels.js
index c72fabf..a7222c5 100644
--- a/js/parts/DataLabels.js
+++ b/js/parts/DataLabels.js
@@ -619,13 +619,41 @@ if (seriesTypes.pie) {
     * fall within the plot area.
     */
    seriesTypes.pie.prototype.placeDataLabels = function () {
+
+       var chart = this.chart,
+           spacing = chart.spacing;
        each(this.points, function (point) {
            var dataLabel = point.dataLabel,
-               _pos;
+               _pos,
+               overflow,
+               ellipsis;

            if (dataLabel && point.visible) {
                _pos = dataLabel._pos;
                if (_pos) {
+                   
+                   if (dataLabel._attr.align === 'right') {
+                       overflow = _pos.x - dataLabel.width;
+                       if (overflow < spacing[3]) {
+                           ellipsis = true;
+                       }
+                   }
+
+                   if (dataLabel._attr.align === 'left') {
+                       overflow = chart.chartWidth - _pos.x - dataLabel.width - spacing[1] - spacing[3];
+                       if (overflow < spacing[1]) {
+                           ellipsis = true;
+                       }
+                   }
+
+                   if (ellipsis) {
+                       dataLabel._attr.width = dataLabel.width + overflow;
+                       dataLabel.css({
+                           width: dataLabel._attr.width + PX,
+                           textOverflow: 'ellipsis'
+                       });
+                   }
+
                    dataLabel.attr(dataLabel._attr);
                    dataLabel[dataLabel.moved ? 'animate' : 'attr'](_pos);
                    dataLabel.moved = true;
diff --git a/js/parts/SvgRenderer.js b/js/parts/SvgRenderer.js
index 1f8b71d..fcc629d 100644
--- a/js/parts/SvgRenderer.js
+++ b/js/parts/SvgRenderer.js
@@ -10,7 +10,7 @@ SVGElement.prototype = {
    opacity: 1,
    // For labels, these CSS properties are applied to the <text> node directly
    textProps: ['fontSize', 'fontWeight', 'fontFamily', 'fontStyle', 'color', 
-       'lineHeight', 'width', 'textDecoration', 'textShadow'],
+       'lineHeight', 'width', 'textDecoration', 'textOverflow', 'textShadow'],

    /**
     * Initialize the SVG renderer

TorsteinHonsi 于 2015-06-09

我从这里（http://jsfiddle.net/CjgLg/13/）尝试了javascript并得到以下信息：

未捕获的类型错误：$(...).resizable 不是函数