Flot饼图中的左偏移未生效

Question

我希望将 pie 放置在 chart 的左上角，但是 left 属性不起作用，另一方面，top 是有效的。

我的代码 - Jsfiddle

代码:

$(function () {
     var data = [
    { label: "Read", data: 50, color: '#614E43' },
    { label: "Unread", data: 150, color: '#F5912D' }];
      $.plot($("#star"), data, 
      {
        series: {

          pie: {        
            radius: 0.2,  
            innerRadius: 0.125,
            show: true,
            stroke: {
                width: 0.1,
                color: '#808080'
            },
            offset: {
                  top: -70,
                  left: -30
            }
          }
        }
      });
});

- Canttouchit

Answer 1

问题出在setupPie()函数上，我认为这是一个bug。

即使实际半径小于最大半径，饼图也不允许左侧位置低于最大半径。 http://flot.googlecode.com/svn/trunk/jquery.flot.pie.js @ line 204

if (centerLeft<maxRadius)
    centerLeft = maxRadius;
else if (centerLeft>canvas.width-maxRadius)
    centerLeft = canvas.width-maxRadius;

如果您设置了相对半径，那么它不应该将左侧与最大宽度进行比较。而应该采取以下方式：

//calculate the radius the same way drawPie() does
var radius = options.series.pie.radius;
if (options.series.pie.radius < 1)
    radius *= maxRadius;

//and compare to that value
if (centerLeft < radius)
    centerLeft = radius;
else if (centerLeft > canvas.width-radius)
    centerLeft = canvas.width-radius;

编辑：

我已经复制了这个代码库并尝试了我的代码，看起来可以完成工作。

这是我的JSFiddle链接。

- MasterAM

Answer 2

正如@MasterAM所指出的那样，这个 bug 出现在 centerLeft 被裁剪的方式上。一个稍微更好的解决方案是简单地将它移动到检查 width 是否等于 "auto" 的部分内，因为裁剪只有在这种情况下才适用。

请注意，您正在使用的 Flot 版本来自 code.google.com，这是相当旧的版本；我们已经一段时间前转移到了Github。我已经在主分支上推送了一个修复程序，所以如果您切换到 GH 上的最新版本，一切都会准备就绪。

- DNS

---

已添加了一个拉取请求。希望您能考虑它。 - MasterAM