için bir degrade ekleme Sütunlar için çizilen SVG rect'lerine bir degrade ekleyerek bir Google ColumnChart'a pizazz eklemeye çalışıyorum. Aşağıdaki kod iframe svg> def'lerine gradyanlar ekleyecektir ve şu anda ilgilendiğim tüm tarayıcılarda (Firefox, IE ve Chrome'un sonraki sürümlerinde) dolguların dolgu özniteliğini doğru şekilde değiştirecektir.Google Görselleştirme ColumnChart
Sorunum üzerinde gezdirin veya bir bar (veya efsane) her seçtiğinizde, renk geri orijinal rengine sıfırlanır olmasıdır. Ben bir SVG noob'um ve rengi nasıl, nerede veya neyin sıfırladığını anlayamadım.
Benim soru bilen var mı nasıl renkleri sıfırlar kodu durdurmak üzerine veya Bir şekilde manipüle etmek (javascript/jquery kullanarak)? Mümkünse 'etkileşimli' parçaları sağlam tutmayı (araç ipucu, vb.) Tercih ederim.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Visualization API Sample</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
google.load("jquery", "1.7.1");
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
var rowData = [['Year', 'North', 'West', 'South'],
['2010', 197, 333, 298 ],
['2011', 167, 261, 381 ]];
var data = google.visualization.arrayToDataTable(rowData);
visualization = new google.visualization.ColumnChart(document.getElementById('visualization'));
google.visualization.events.addListener(visualization, 'ready', function(){
var svgns = "http://www.w3.org/2000/svg";
var gradients = [["red","#C0504D","#E6B8B7"],
["green","#9BBB59","#D8E4BC"],
["blue","#4F81BD","DCE6F1"]];
var svg_defs = $("#visualization iframe").contents().find('defs');
// add gradients to svg defs
for(var i = 0; i < gradients.length; i++){
var grad = $(document.createElementNS(svgns, "linearGradient")).
attr({id:gradients[i][0],x1:"0%",x2:"0%",y1:"0%",y2:"100%"});
var stopTop = $(document.createElementNS(svgns, "stop")).
attr({offset:"0%","stop-color":gradients[i][1]});
var stopBottom = $(document.createElementNS(svgns, "stop")).
attr({offset:"100%","stop-color":gradients[i][2]});
$(grad).append(stopTop).append(stopBottom);
svg_defs.append(grad);
}
// #3366cc, #dc3912, #ff9900 - replace default colors with gradients
$("#visualization iframe").contents().find('rect[fill="#3366cc"]').attr({'fill':'url(#blue)','stroke-width':0.4,'stroke':'#000000'});
$("#visualization iframe").contents().find('rect[fill="#dc3912"]').attr({'fill':'url(#blue)','stroke-width':0.4,'stroke':'#000000'});
$("#visualization iframe").contents().find('rect[fill="#ff9900"]').attr({'fill':'url(#blue)','stroke-width':0.4,'stroke':'#000000'});
});
// Create and draw the visualization.
visualization.draw(data,{width:600, height:400});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>
GÜNCELLEME
yüzden bu renk kodları (onları kullanan işlevleri bulmak orada ve) saklanabilir nerede olabileceğini bulabildiğim görmek için DOM bakarken, ben bu buldunuz (ki seti istediğimi yapmama ne zaman): (
//fill
visualization.qa.l.e[0].Hm.O = "url(#blue)";
visualization.qa.l.e[1].Hm.O = "url(#red)";
visualization.qa.l.e[2].Hm.O = "url(#green)";
// stroke
visualization.qa.l.e[0].Hm.Jb = "#000000";
visualization.qa.l.e[1].Hm.Jb = "#000000";
visualization.qa.l.e[2].Hm.Jb = "#000000";
// fill-opacity
//visualization.qa.l.e[0].Hm.$b = 0.5;
//visualization.qa.l.e[1].Hm.$b = 0.5;
//visualization.qa.l.e[2].Hm.$b = 0.5;
// stroke-width
visualization.qa.l.e[0].Hm.H = 0.4;
visualization.qa.l.e[1].Hm.H = 0.4;
visualization.qa.l.e[2].Hm.H = 0.4;
// stroke-opacity
//visualization.qa.l.e[0].Hm.nc = 0.5;
//visualization.qa.l.e[1].Hm.nc = 0.5;
//visualization.qa.l.e[2].Hm.nc = 0.5;
ama Google Görselleştirme kodunu günceller bir dahaki sefere bu değişken adları değişecek eminim bu sadece geçici bir çözüm olacağını bilmiyorum birini seçtiğini düşün Bu amaçla ve kullanılan kompresör/obfuscator muhtemelen bir dahaki sefere farklı değişken isimleri seçer - ama sonra kim bilir - belki de olmaz).
Yani herkes elle bulma ve değişken adlarını ayarlama bağlı değildir daha kalıcı yolu bilir, bunu isterim. Aksi halde, bu benim için en iyi bahis olabilir.
Update2 (1 Mart 2012) noktasında
Olgu. değişkenler artık taşınır:
//fill
visualization.da.C.d[0].en.S = "url(#blue)";
[burada MutationObserver' kullanarak bir gantt grafiğinde çubuk rengini değiştirmek için bir çalışma örneği var (http://stackoverflow.com/a/40655754/5090771) – WhiteHat