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

任何人都知道这是可能的吗？从中心开始部分填充FLOT饼图切片颜色，从中心开始

基本上我需要能够用颜色部分遮挡饼图片，比如0-10范围，其中0代表饼图片中没有颜色，10代表完全遮挡。谢谢你的帮助！

来源

2016-05-11 K. O' Dell

一个有趣的问题。我想尝试一些事情来实现您想要的布局，并提出了两种不同的解决方案，请参阅下面的答案。 – Raidri

（免责声明：我的另一个答案是关于饼图的传说和正确定位，而哈克但是当你不能修改插件代码，所以这里更清洁的第二个版本可以正常工作。）

这对于默认方法来说是不可能的，但是通过直接更改饼图插件相对简单。复制插件（source，1.1版），并以下更改本地副本：

395线和406在function drawPie()：
添加slices[i].radius的参数两种drawSlice()电话。
423线在function drawSlice()：
更改功能的function drawSlice()头到
```
function drawSlice(angle, color, fill, sliceRadius) { 
```

428行：添加以下代码：

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

441线至443（前从3中插入代码）function drawSlice()：
用替换。

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

这是表示对radius属性的值不同它fiddle：

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) 
}];

来源

2016-05-12 13:16:44 Raidri

非常感谢Raidri！您所做的更改适合我需要的功能。祝你晚上愉快！我还会做其他事情来给你点数吗？ –

您可以通过点击选票左侧的复选标记来接受一个答案（您认为更好的答案）。 [FAQ]（http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work）（此外，你可以upvote一个或两个答案（s），但你需要15的声望upvote 。[Upvote特权]（http://meta.stackexchange.com/help/privileges/vote-up）） – Raidri

这是不可能的默认方法，但你可以实现一些创造力类似的东西：

创建每个范围值，其中包含此范围值每个切片获得其正常的颜色一个数据集，所有其他切片得到color: 'transparent'。

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

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

位置上彼此顶部所有的饼图通过使用CSS。

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

您可能希望做一个手动的传说，因为只有最上面的传说是完全可见。这里有一个fiddle的例子，你可以从中开始开发自己的代码。

来源

2016-05-12 12:15:44 Raidri

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

回答

相关问题