从中心开始用颜色部分填充 FLOT 饼图切片

Question

有人知道这是否可行吗？

基本上，我只需要能够用颜色对饼图切片进行部分着色，比如说 0-10 的范围，其中 0 表示饼图切片中没有颜色，10 表示完全着色。感谢您的帮助！

Answer 1

默认方法无法做到这一点，但您可以通过一些创意实现类似的效果：

为每个范围值创建一个数据集，其中具有该范围值的每个切片都获得其正常颜色，所有其他切片获得 color: 'transparent'。

为每个范围值绘制一个单独的饼图，选项设置如下：

    pie: {
        show: true,
        radius: 0.7 // example for a range value of 7
    }

使用 css.

结果（对于两个不同的范围值：7 和 10）：

您可能想做一个手动图例，因为只有最上面的图例是完全可见的。这是一个 fiddle，其中包含一个工作示例，您可以从中开始开发自己的代码。

Answer 2

(免责声明：关于图例和饼图的正确定位，我的另一个答案相当老套，但是当您无法修改插件代码时可以使用，所以这里更干净的第二个版本。）

使用默认方法这是不可能的，但通过直接更改 pie 插件相对简单。复制插件（source，版本 1.1）并对本地副本进行以下更改：

function drawPie() 中的第 395 行和第 406 行：
将 slices[i].radius 添加到两个 drawSlice() 调用的参数中。
function drawSlice() 中的第 423 行：
将函数的header改为
```
function drawSlice(angle, color, fill, sliceRadius) {
```

function drawSlice() 中的第 428 行：添加此代码：

if (!jQuery.isNumeric(sliceRadius)) {
    sliceRadius = radius;                    
}
else if (sliceRadius >= 0.0 && sliceRadius <= 1.0) {
    sliceRadius = radius * sliceRadius;                    
}

function drawSlice() 中的第 441 到 443 行（在插入 3 中的代码之前）：
将 radius 替换为 sliceRadius.

经过上述更改后，您可以为饼图中的每个数据点/切片定义一个radius 属性。这遵循与一般 radius 属性相同的规则（如果 radius 在 0 和 1 之间，它将用作一般半径的百分比，否则将用作像素值） .

这是一个 fiddle 显示它具有不同的值 radius 属性:

var data = [{
    label: 'red',
    color: 'red',
    data: 1,
    radius: 100 // radius in pixel (about 50% here)
}, {
    label: 'green',
    color: 'green',
    data: 3
    // default is the general radius
}, {
    label: 'blue',
    color: 'blue',
    data: 2,
    radius: 0.8 // radius 80% of general radius (about 160 pixel here)
}];

从中心开始用颜色部分填充 FLOT 饼图切片

Partially fill a FLOT pie chart slice with color, starting at center

javascript

flot