当前位置： 文江博客话题详情

向 Google-Visualization ColumnChart 添加渐变

发布于 2025-01-04 02:30:21 字数 4658 浏览 3 评论 0原文

我试图通过向为列绘制的 SVG 矩形添加渐变来为 Google ColumnChart 添加一些活力。下面的代码将向 iframe svg>defs 添加渐变，并在我目前关心的所有浏览器（Firefox、IE 和 Chrome 的更高版本）中正确替换 rects 的 fill 属性。

我的问题是，每当我将鼠标悬停在或选择一个栏（或图例）时，颜色就会重置回原始颜色。我是一个 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, '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>

更新

因此，在浏览 DOM 以查看是否可以找到这些颜色代码可能存储的位置（并找到使用它们的函数）时，我确实找到了这些（设置时会这样做）我想要的）：

      //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;

但这只是一个临时解决方案，因为我确信下次谷歌更新可视化代码时，这些变量名称将会改变（我不认为有人故意选择这些，并且使用的压缩器/混淆器会改变）下次可能会选择不同的变量名称 - 但是谁知道 - 也许不会）。

因此，如果有人知道一种不依赖于手动查找和设置变量名称的更永久的方法，我会喜欢它。否则，这可能是我目前最好的选择。

UPDATE2（2012 年 3 月 1 日）

就是一个很好的例子。现在变量已移动：

      //fill
      visualization.da.C.d[0].en.S = "url(#blue)";
原文

I'm trying to add some pizazz to a Google ColumnChart by adding a gradient to the SVG rects that are drawn for the columns. The code below will add gradients to the iframe svg>defs and replace the fill attribute of the rects correctly in all the browsers I care about at this moment (later versions of Firefox, IE and Chrome).

My problem is that whenever I hover over or select a bar (or the legend), the color is reset back to the original color. I'm an SVG noob and I haven't been able to figure how, where or what is resetting the color.

So my question is does anyone know how (using javascript/jquery) to stop, overwrite or someway manipulate the code that resets the colors? I would prefer to keep the 'interactive' parts intact (tooltip, etc.) if possible.

<!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

So while looking through the DOM to see if I could find where these color codes might be stored (and there by find the functions that are using them), I did find these (which when set will do what I want):

      //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;

but this would be only a temporary solution as I'm sure the next time Google updates the Visualization code, these variable names will change (I don't think someone choose these on purpose and the compressor/obfuscator used would probably pick different variable names next time - but then who knows - maybe it won't).

So if anyone knows of a more permanent way that doesn't depend on manually finding and setting the variable names, I would love it. Otherwise, this may be my best bet for now.

UPDATE2 (March 1, 2012)

Case in point. The variables are now moved:

      //fill
      visualization.da.C.d[0].en.S = "url(#blue)";

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

予囚 2025-01-11 02:30:21

您可以使用 MutationObserver 来了解 svg 何时发生更改，

将代码从 'ready' 事件侦听器移动到 observer< br>
覆盖重置颜色的代码，

如以下代码片段所示...

<!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);

        var chartDiv = document.getElementById('visualization');
        visualization = new google.visualization.ColumnChart();

        // observe changes to the chart container
        var observer = new MutationObserver(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'});
        });

        observer.observe(chartDiv, {
          childList: true,
          subtree: true
        });

        // 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>

you can use a MutationObserver to know when changes have been made to the svg

move the code from the 'ready' event listener to the observer
to overwrite the code that resets the colors

as in the following snippet...

<!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);

        var chartDiv = document.getElementById('visualization');
        visualization = new google.visualization.ColumnChart();

        // observe changes to the chart container
        var observer = new MutationObserver(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'});
        });

        observer.observe(chartDiv, {
          childList: true,
          subtree: true
        });

        // 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>
回复 原文
~没有更多了~

关于作者

眼波传意

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

动次打次papapa

文章 0 评论 0

我是有多爱你

文章 0 评论 0

原来分手还会想你

文章 0 评论 0

linces

文章 0 评论 0

霓裳挽歌倾城醉

文章 0 评论 0

玍銹的英雄夢

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文