Próbuję dodać pizazza do kolumny ColumnChart Google, dodając gradient do prostokątów SVG, które są rysowane dla kolumn. Poniższy kod doda gradienty do iframe svg> defs i poprawnie zastąpi atrybut wypakowania rects we wszystkich przeglądarkach, na których mi zależy w tej chwili (nowsze wersje Firefox, IE i Chrome).Dodawanie gradientu do kolumny Google-wizualizacjiChart
Mój problem polega na tym, że po najechaniu kursorem myszy lub wybraniu paska (lub legendy) kolor zostanie przywrócony do pierwotnego koloru. Jestem SVob noobem i nie byłem w stanie określić, jak, gdzie i co resetuje kolor.
Moje pytanie brzmi, czy ktoś wie, jak (przy użyciu javascript/jquery) zatrzymać, nadpisać lub w inny sposób manipulować kod, który resetuje kolory? Wolałbym zachować "interaktywne" części w stanie nienaruszonym (podpowiedzi itp.), Jeśli to możliwe.
<!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>
UPDATE
Więc patrząc przez DOM, aby zobaczyć, czy mogę dowiedzieć się, gdzie te kody kolorystyczne mogą być przechowywane (i tam znaleźć funkcje, które są używane), ja je znaleźć (które, gdy zestaw będzie robić to, co chcę):
//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;
ale byłoby to tylko tymczasowe rozwiązanie, ponieważ jestem pewien, że następnym razem Google aktualizuje kod Wizualizacja te nazwy zmiennych zmieni (nie Myślę, że ktoś wybiera celowo i użyty kompresor/obfuscator prawdopodobnie wybrałby inną nazwę zmiennej następnym razem - ale kto wie - może nie).
Więc jeśli ktoś wie o bardziej trwały sposób, który nie zależy od ręcznego znalezienia i ustawienia nazw zmiennych, chciałbym go. W przeciwnym razie to może być mój najlepszy zakład na teraz.
Update2 (01 marca 2012)
przykładem. Zmienne są teraz przeniesione:
//fill
visualization.da.C.d[0].en.S = "url(#blue)";
[tutaj jest przykładem do zmiany koloru paska na wykresie Gantta za pomocą 'MutationObserver'] (http://stackoverflow.com/a/40655754/5090771) – WhiteHat