将链接插入 Google Charts api 数据? [英] Insert Links into Google Charts api data?

问题描述

我在谷歌图表游戏场玩了很多次谷歌图表:

元素.ForeignObject 元素可以包含常规 HTML.然后需要将这些或多或少放置在原始 SVG 文本节点所在的位置.

这是说明所有这些的示例片段.它针对您的具体示例进行了调整，因此当您切换到渲染任何真实数据时，您将需要相应地修改和概括此代码段.

//注意:您可能需要调整这些增量//使您的标签能够很好地定位.无功 xDelta = 35;变量 yDelta = 13;var years = ['2003','2004','2005','2006','2007','2008'];$('text').each(function(i, el) {如果 (years.indexOf(el.textContent) != -1) {var g = el.parentNode;var x = el.getAttribute('x');var y = el.getAttribute('y');var width = el.getAttribute('width') ||50;var height = el.getAttribute('height') ||15;//"ForeignObject" 标签是将 HTML 注入 SVG 文档的方式.var fo = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject")fo.setAttribute('x', x - xDelta);fo.setAttribute('y', y - yDelta);fo.setAttribute('高度', 高度);fo.setAttribute('宽度', 宽度);var body = document.createElementNS("http://www.w3.org/1999/xhtml", "BODY");var a = document.createElement("A");a.href = "http://yahoo.com";a.setAttribute("style", "color:blue;");a.innerHTML = el.textContent;body.appendChild(a);fo.appendChild(body);//删除原始 SVG 文本并用 HTML 替换它.g.removeChild(el);g.appendChild(fo);}});

小注，为了方便起见，里面有一些 jQuery，但您可以将 $('text') 替换为 document.getElementsByTagName("svg")[0].getElementsByTagName(文本").

I have been playing around with Google charts quite a bit over in the google charts play ground here:

Link

The code I have been playing with is this:

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Austria'],
    ['2003',  1336060],
    ['2004',  1538156],
    ['2005',  1576579],
    ['2006',  1600652],
    ['2007',  1968113],
    ['2008',  1901067]
  ]);

  // Create and draw the visualization.
  new google.visualization.BarChart(document.getElementById('visualization')).
      draw(data,
           {title:"Yearly Coffee Consumption by Country",
            width:600, height:400,
            vAxis: {title: "Year"},
            hAxis: {title: "Cups"}}
      );
}

and that gives me a nice chart that looks like this:

I am trying to have this chart fit the needs of my website, and to do this, I need to make the bar names on the left links to another page. So for example 2003 would be a link that the user can click ans so would 2004 etc.

I tried to do something like this:

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Austria'],
    ['<a href="url">Link text</a>',  1336060],
    ['2004',  1538156],
    ['2005',  1576579],
    ['2006',  1600652],
    ['2007',  1968113],
    ['2008',  1901067]
  ]);

  // Create and draw the visualization.
  new google.visualization.BarChart(document.getElementById('visualization')).
      draw(data,
           {title:"Yearly Coffee Consumption by Country",
            width:600, height:400,
            vAxis: {title: "Year"},
            hAxis: {title: "Cups"}}
      );
}

But I could only hope for it to be that easy and it wasn't. Does anyone know if this is at all possible?

解决方案

This is non-trivial because the output you are seeing is SVG, not HTML. Those labels in your example ("2004", "2005", etc) are embedded inside SVG text nodes, so inserting raw HTML markup inside them will not be rendered as HTML.

The workaround is to scan for the text nodes containing the target values (again, "2004", "2005" etc) and replace them with ForeignObject elements. ForeignObject elements can contain regular HTML. These then need to be positioned more-or-less where the original SVG text nodes had been.

Here is a sample snippet illustrating all this. It is tuned to your specific example, so when you switch to rendering whatever your real data is, you will want to modify and generalize this snippet accordingly.

// Note: You will probably need to tweak these deltas
// for your labels to position nicely.
var xDelta = 35;
var yDelta = 13;
var years = ['2003','2004','2005','2006','2007','2008'];
$('text').each(function(i, el) {
  if (years.indexOf(el.textContent) != -1) {
    var g = el.parentNode;
    var x = el.getAttribute('x');
    var y = el.getAttribute('y');
    var width = el.getAttribute('width') || 50;
    var height = el.getAttribute('height') || 15;

    // A "ForeignObject" tag is how you can inject HTML into an SVG document.
    var fo = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject")
    fo.setAttribute('x', x - xDelta);
    fo.setAttribute('y', y - yDelta);
    fo.setAttribute('height', height);
    fo.setAttribute('width', width);
    var body = document.createElementNS("http://www.w3.org/1999/xhtml", "BODY");
    var a = document.createElement("A");
    a.href = "http://yahoo.com";
    a.setAttribute("style", "color:blue;");
    a.innerHTML = el.textContent;
    body.appendChild(a);
    fo.appendChild(body);

    // Remove the original SVG text and replace it with the HTML.
    g.removeChild(el);
    g.appendChild(fo);
  }
});

Minor note, there is a bit of jQuery in there for convenience but you can replace $('text') with document.getElementsByTagName("svg")[0].getElementsByTagName("text").

这篇关于将链接插入 Google Charts api 数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！