Tôi đang cố gắng thêm một số pizazz vào Google ColumnChart bằng cách thêm một gradient vào rg SVG được vẽ cho các cột. Mã bên dưới sẽ thêm gradient vào iframe svg> defs và thay thế thuộc tính fill của rects một cách chính xác trong tất cả các trình duyệt mà tôi quan tâm tại thời điểm này (các phiên bản sau của Firefox, IE và Chrome).Thêm một gradient vào Google-Visualization ColumnChart
Vấn đề của tôi là bất cứ khi nào tôi di chuột qua hoặc chọn một thanh (hoặc chú giải), màu sẽ được đặt lại về màu gốc. Tôi là một SVG noob và tôi đã không thể tìm ra cách, nơi hoặc những gì được đặt lại màu sắc.
Vì vậy, câu hỏi của tôi là không ai biết làm thế nào (bằng cách sử dụng javascript/jquery) để ngăn chặn, ghi đè hoặc cách khác thao tác mã mà đặt lại màu sắc? Tôi muốn giữ nguyên các phần 'tương tác' (tooltip, vv) nếu có thể.
<!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>
CẬP NHẬT
Vì vậy, khi nhìn qua DOM để xem nếu tôi có thể tìm thấy nơi các mã màu có thể được lưu trữ (và có bằng tìm các chức năng đang sử dụng chúng), tôi đã tìm thấy những (mà khi bộ sẽ làm những gì tôi muốn):
//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;
nhưng điều này sẽ chỉ là một giải pháp tạm thời như tôi chắc chắn rằng lần sau khi Google cập nhật mã Visualization, các tên biến sẽ thay đổi (tôi không nghĩ ai đó chọn những mục đích này và máy nén/obfuscator sử dụng có lẽ sẽ chọn tên biến khác nhau thời gian tới - nhưng sau đó ai biết - có lẽ nó sẽ không).
Vì vậy, nếu có ai biết cách lâu dài hơn không phụ thuộc vào việc tìm kiếm và đặt tên biến theo cách thủ công, tôi rất thích nó. Nếu không, điều này có thể là đặt cược tốt nhất của tôi cho bây giờ.
UPDATE2 (ngày 01 tháng ba năm 2012)
Trường hợp tại điểm. Các biến hiện nay đang chuyển:
//fill
visualization.da.C.d[0].en.S = "url(#blue)";
[đây là ví dụ hoạt động để thay đổi màu của thanh trên biểu đồ gantt bằng cách sử dụng 'MutationObserver'] (http://stackoverflow.com/a/40655754/5090771) – WhiteHat