是否可以在g.Raphaël條形圖中爲每個條打上自己的顏色?g.raphael條形圖爲每個酒吧不同的顏色?
我完全能夠改變系列的顏色。 但我想要的是,每個系列的第一個結果具有相似的顏色,每個系列的第二個等等。
我找不到很多關於它的文檔,我已經嘗試了幾個無頭實驗,但沒有一個能夠達到我想要的效果。
是否可以在g.Raphaël條形圖中爲每個條打上自己的顏色?g.raphael條形圖爲每個酒吧不同的顏色?
我完全能夠改變系列的顏色。 但我想要的是,每個系列的第一個結果具有相似的顏色,每個系列的第二個等等。
我找不到很多關於它的文檔,我已經嘗試了幾個無頭實驗,但沒有一個能夠達到我想要的效果。
你可以改變每個路徑的attr
財產svg
r.barchart(x,y,width,length,[data]);
var colors =["#ff0000","#00ff00","#0000ff","#ffff00","#ff00ff","#00ffff","#552288","#228844","#a38643","#296583"];
// use jquery for easier way
$("#holder svg path").each(function(index){
$(this).attr("fill",colors[index]);
});
您可以設置選項如下:
var custom_colors =["#ff0000","#00ff00","#0000ff","#ffff00","#ff00ff","#00ffff"];
r.barchart(x,y,width,height,[data], { colors: custom_colors });
其他選項
var options : {
legend : [],
stacked: false, //Use this to stack your bars instead of displaying them side by side
type: "soft", //round, sharp, soft, square,
colors : custom_colors
}
r.barchart(x,y,width,height,[data], options);
您可能希望定義你的顏色在一個函數中。這是一個功能,您可以使用:
function _getColors() {
var byndColors = ["#ffc000","#1d1d1d","#e81c6e","#7c7c7c","#00aff2","#aaaaaa","#611bc9"];
//some random colors
var randColors = ["#77efac","#364f8a","#60cb94","#cf263b","#2471bb","#7fc398","#d2c66a","#2109dc","#66ad29","#9a9754","#640cdf","#257683","#d51e05","#4bb36e","#e7408a","#1ef173","#1756bc","#cff215","#15c2fb","#f010ab","#844a0","#c34021","#3e4cf2","#8e2864","#a28f5c","#a9d528","#7b1e43","#a5401c","#829813","#691ccd"]
//combine them
return byndColors.concat(randColors);
}
,並用它喜歡:
r.barchart(x,y,width,height,[data], { colors: _getColors() });
你需要指定一些顏色,然後確保數據數組的數組,其中內的索引陣列是對於所有的值,但該索引的所有0:
data = [[55, 0, 0], [0, 20, 0], [0, 0, 40]];
r.barchart(10, 10, 100, 220, data, {
colors: [
// Some colours
"000-#d00-#900",
"000-#f64-#c31",
"000-#fc0-#c90",
"000-#3a3-#070",
"000-#2bc-#089",
"000-#00d-#00a",
"000-#808-#404",
"000-#444-#000"
]
});
這裏r
是聖拉斐爾實例。請參閱http://g.raphaeljs.com/barchart.html
您可以使用當前的嘗試發佈一些代碼,可能是[JSFiddle](http://jsfiddle.net/)嗎?你應該可以做到這一點,但是要把它們放在一起需要一些努力。 – ghayes