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

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

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

如果你想尝试，你将不得不编辑 pie 插件，真正的困难不是单个半径而是阴影（如果你倾斜你的 pie 会有阴影）目前是一个完整的黑圈，需要改为使用单独的阴影绘制，但您似乎没有使用阴影，因此您不需要它。

因此，饼图插件使用 drawPie() 方法来绘制饼图，该方法包含绘制单个切片的 drawSlice() 方法。您需要做的是告诉 drawSlice 根据您的半径平移绘图：

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

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

（我在调用中添加了 slices[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] }