如何在餅圖上設置漸變效果？Flot上的漸變
[{
label: i,
data: 1000,
color: [ "rgb(190,110,110)", "rgb(140, 70, 70)", "rgb(110, 50, 50)", "rgb(60, 10, 10)" ]
},
//nextserie
]
不起作用。
另外，如何將漸變效果設置爲我的圖表的默認顏色？在這種方式下，您可以通過編號索引它：
[{
label: i,
data: 1000,
color: 1,
},
//nextserie
]
我現在增加了對使用漸變（徑向或線性）呈現餅圖的支持。我的提交在pull request #853中引用。
一個例子 「默認」 餅圖具有徑向梯度：
$.plot($("#default_gradient"), data, {
series: {
pie: {
show: true,
gradient: {
radial: true,
colors: [
{opacity: 0.5},
{opacity: 1.0}
]
}
}
}
});
具有徑向梯度的示例圓環圖：
$.plot($("#donut_gradient"), data,
{
series: {
pie: {
innerRadius: 0.5,
show: true,
gradient: {
radial: true,
colors: [
{opacity: 1.0},
{opacity: 1.0},
{opacity: 1.0},
{opacity: 0.5},
{opacity: 1.0}
]
}
}
}
});
的帶有ar的傾斜餅圖的示例adial梯度：
$.plot($("#graph9_gradient"), data,
{
series: {
pie: {
show: true,
radius: 1,
tilt: 0.5,
gradient: {
radial: true,
colors: [
{opacity: 0.5},
{opacity: 1.0}
]
},
label: {
show: true,
radius: 1,
formatter: function(label, series){
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';
},
background: { opacity: 0.8 }
},
combine: {
color: '#999',
threshold: 0.1
}
}
},
legend: {
show: false
}
});
的變化可以基於由@Hoffman和a patch提出上述建議的組合在Flot issue #355建議通過Luc Boudreau。
好吧，我自己做了。花了我一段時間來了解flot在內部是如何工作的，但最終我找到了需要改變的部分。在jquery.flot.pie.js改變drawSlice功能（在海軍報0.7行406）到：
function drawSlice(angle, color, fill)
{
if (angle<=0)
return;
if (fill) {
if (typeof color === "object") {
var grad= ctx.createRadialGradient(0, 0, 0, 0, 0, radius);
var i;
var numColors= color.colors.length;
for (i=0; i< numColors ; i++) {
grad.addColorStop(i/(numColors-1), color.colors[i]);
}
ctx.fillStyle = grad;
} else {
ctx.fillStyle = color;
}
ctx.fillStyle = color;
} else {
ctx.strokeStyle = color;
ctx.lineJoin = 'round';
}
的，如果以後不刪除代碼的其餘部分。
而且像變魔術一樣，現在你可以定義一系列的徑向漸變顏色：
[{
label: i,
data: Math.random() *1000,
color: { colors: [ "rgb(190,110,110)", "rgb(140, 70, 70)", "rgb(110, 50, 50)", "rgb(60, 10, 10)" ] }
}]
我會盡力做一個很酷的圖形，然後我將它截圖，並張貼在這裏。
編輯：在這裏你去：
var d1= [];
d1.push({
label: "Crítico",
data: Math.random() *1000,
color: { colors: [ "rgb(190,110,110)", "rgb(140, 70, 70)", "rgb(110, 50, 50)", "rgb(60, 10, 10)" ] }
});
d1.push({
label: "Médio",
data: Math.random() *1000,
color: { colors: [ "rgb(110,110,190)", "rgb(70, 70, 140)", "rgb(50, 50, 110)", "rgb(10, 10, 60)" ] }
})
this.plot= $.plot($div, d1);
這比使用純色好了很多，但它可以得到好多了，我只是不擅長挑選顏色。現在我發現了一個小問題，傳說不適合我的更改，它們上面不會顯示顏色。我不願意解決這個問題，因爲這個功能出現在覈心Flot文件中（這比餅圖插件更大更復雜），我沒有太多的空閒時間來解決這個問題。
嘿，人很酷。我接受了你的回答，可能比我的黑客少得多。告訴我，它是否能起到傾斜作用？ – Hoffmann
@霍夫曼，謝謝你接受我的回答。我已經更新了我的答案，包括一個傾斜餅圖的例子，至少根據我的預期，它似乎有效。它也使用線性漸變，但看起來很糟糕，所以我沒有包含它的一個例子。 –
嘿@mtr，使用線性漸變時有一個錯誤。他們只覆蓋了一半的餅圖。要修復它在drawSlice函數中的變化，請改爲：gradient = ctx.createLinearGradient（0，-bottom/2，0，bottom/2）注意，這不再使用top屬性，所以我不確定它是否會修復100％不在圖表的中心（可能會將頂部的一半添加到兩個非零參數？）。無論如何，漸變也設置爲從情節區域的底部開始，而不是餅圖的開始，使得餅圖不能完全覆蓋情節區域。徑向漸變很好。 – Hoffmann