小编End*_*ndi的帖子

向Google-Visualization ColumnChart添加渐变

我正在尝试通过向为列绘制的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)

svg gradient google-visualization

7
推荐指数
1
解决办法
2708
查看次数

标签 统计

google-visualization ×1

gradient ×1

svg ×1