Estoy tratando de agregar un poco de pizazz a Google ColumnChart agregando un degradado a las rectas SVG que se dibujan para las columnas. El siguiente código agregará degradados al iframe svg> defs y reemplazará correctamente el atributo fill de las rects en todos los navegadores que me preocupan en este momento (versiones posteriores de Firefox, IE y Chrome).Agregando un degradado a Google-Visualization ColumnChart
Mi problema es que siempre que sobrepaso o selecciono una barra (o la leyenda), el color se restablece al color original. Soy un novato SVG y no he podido averiguar cómo, dónde o qué está restableciendo el color.
Así que mi pregunta es, ¿alguien sabe cómo (utilizando javascript/jquery) detener, sobrescribir o manipular de alguna manera el código que restablece los colores? Preferiría mantener las partes "interactivas" intactas (información sobre herramientas, etc.) si es posible.
<!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>
ACTUALIZACIÓN
Así, mientras que mirando a través del DOM para ver si podía encontrar ya que pueden guardarse estos códigos de color (y no por encontrar las funciones que los utilizan), he encontrado estos (que cuando se establece hará lo que yo quiero):
//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;
pero esto sería sólo una solución temporal ya que estoy seguro que la próxima vez que Google actualiza el código de visualización, estos nombres de variables va a cambiar (no lo hago pensar que alguien elija estos a propósito y el compresor/ofuscador utilizado probablemente elegirán diferentes nombres de variables la próxima vez, pero quién sabe, tal vez no sea así).
Así que si alguien sabe de una manera más permanente que no depende de encontrar y configurar manualmente los nombres de las variables, me encantaría. De lo contrario, esta puede ser mi mejor apuesta por el momento.
Update2 (1 de marzo de 2012)
El caso en cuestión. Las variables se mueven ahora:
//fill
visualization.da.C.d[0].en.S = "url(#blue)";
[aquí hay un ejemplo de trabajo para cambiar el color de la barra en un diagrama de Gantt usando 'MutationObserver'] (http://stackoverflow.com/a/40655754/5090771) – WhiteHat