个人中心
gpt4 book ai didi

svg - 向 Google-Visualization ColumnChart 添加渐变

转载 作者：行者123 更新时间：2023-12-04 12:59:32 24 4
gpt4 key购买 nike

我试图通过向为列绘制的 SVG 矩形添加渐变来向 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, '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;

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

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

更新2 (2012 年 3 月 1 日)

举个例子。现在移动变量: 
      //fill
      visualization.da.C.d[0].en.S = "url(#blue)";

最佳答案

您可以使用 MutationObserver知道何时对 svg 进行了更改

从 'ready' 移动代码observer 的事件监听器
覆盖重置颜色的代码

如以下代码段所示...

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

关于svg - 向 Google-Visualization ColumnChart 添加渐变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9217065/

24 4 0
文章推荐： qt - QLineEdit 只接受一个字符/数字
文章推荐： ruby-on-rails - rails : Hooking into ORM generator
文章推荐： wcf - 我的测试表明 .NET Remoting 比 WCF 4 快 1.5 倍
文章推荐： oracle - "TIMESTAMP WITH TIME ZONE"<--> DateTImeOffset 映射不会在 INSERT 命令上传递区域部分( Entity Framework + Oracle)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com