円グラフにグラデーション効果を設定するにはどうすればよいですか?
[{
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
]
放射状または線形のグラデーションを使用して円グラフをレンダリングするためのサポートを追加しました。私のコミットはプルリクエスト＃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}
]
}
}
}
});
放射状のグラデーションを使用した傾斜円グラフの例：
$.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によって提案された上記の提案と、 Luc BoudreauによってFlotの問題＃355で提案されたパッチの組み合わせに基づいていました。
わかりました、それで私はそれを自分でしました。フロートが内部でどのように機能するかを理解するのに少し時間がかかりましたが、最終的には変更が必要な部分を見つけました。jquery.flot.pie.jsで、drawSlice関数（Flot 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';
}
ifの後に残りのコードを削除しないでください。
そして魔法のように、放射状のグラデーションカラーでシリーズを定義できます。
[{
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ファイル（pieプラグインよりもはるかに大きく複雑です）に存在し、それをいじる自由な時間があまりないので、私はそれを修正するつもりはありません。
現在、ライブラリはそれをサポートしていません。パッチをマージすることに慣れている場合は、パイにグラデーションを追加する問題355（元のGoogle Codeの問題へのリンクをたどって添付ファイルを取得する）とともに提出されたパッチがありました。でも、まだ自分で試したことはありません。