1

I have a pretty basic donut chart using flot.js. 

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

Is it possible to format individual slices? I want to set the innerRadius of one slice to be wider than another. My goal is to have a graph with two data points and to make one of the slices wider to emphasize that information.

4

1 回答 1

3

遗憾的是没有单独的内半径选项，我没有看到论坛上讨论过它。尽管我可能误解了您想要的内容：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] }
于 2014-07-24T07:39:18.173 回答