Question

我使用flot.js有一个非常基本的甜甜圈图表。

var options = {
          series: {
            pie: {
                innerRadius: 0.85,
                show: true
              }
            },
            grid: {
              hoverable: true
            },
            colors: ["#83a243", "#0d596d"]
            };
$.plot($("#donut-div"), [4, 6], options);

是否可以格式化单个切片？我想将一个切片的innerRadius设置为比另一个切片更宽。我的目标是创建一个包含两个数据点的图表，并使其中一个切片更宽，以强调该信息。

Answer 1

可悲的是，没有单独的内半径选项，我没有看到它在论坛上被讨论过。虽然我可能误解了你想要的东西：innerRadius是圆环孔的半径，而不是切片的半径。使用单个innerRadius，您将以此结束：

http://img11.hostingpics.net/pics/420457test.png

这不会使切片变宽，而是将它们分开。

如果你想尝试一下，你必须编辑饼图插件，真正的难点不是单个半径而是阴影（如果你倾斜你的馅饼有阴影），这是一个需要的整个黑暗圆圈相反，用单个阴影绘制，但你似乎不使用阴影，所以你不需要它。

因此，派插件使用drawPie（）方法绘制饼图，该方法包含绘制单个切片的drawSlice（）方法。你需要做的是告诉drawSlice根据你的半径翻译绘图：

所以在调用drawSlice的地方，只需用以下内容替换调用：

drawSlice(slices[i].angle, slices[i].translateRadius, slices[i].color, true);

（我在通话中添加了切片[i] .translateRadius）

并在drawSlice方法本身中填充选项后：

ctx.translate(
  translateRadius * Math.cos(currentAngle + angle / 2), 
  translateRadius * Math.sin(currentAngle + angle / 2)
)

这就是翻译。你可以使用一些安全选项（检查是否设置了translateRadius等等），你只需要在你的个人系列中添加一个translateRadius选项像这样：

var data = [ {translateRadius: 10, data: [66] } , {translateRadius: 10, data: [33] }

Flot圆环图 - 格式化单个饼图

1 个答案: