我正在尝试通过向为列绘制的SVG rects添加渐变来向Google ColumnChart添加一些pizazz.下面的代码将增加梯度,以iframe的SVG> DEFS和所有我关心的浏览器在这一刻(更高版本的Firefox,IE和Chrome浏览器)正确地更换rects的填充属性.
我的问题是,无论何时我将鼠标悬停在上面或选择一个条形图(或图例),颜色都会重置为原始颜色.我是一个SVG菜鸟,我无法弄清楚重置颜色的方式,位置或内容.
所以我的问题是有没有人知道如何(使用javascript/jquery)停止,覆盖或某种方式操纵重置颜色的代码?如果可能的话,我宁愿保持"互动"部分的完整性(工具提示等).
<!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, …Run Code Online (Sandbox Code Playgroud)