javascript - 将链接插入 Google Charts api 数据？

Question

我在这里的谷歌图表游戏场上玩了很多谷歌图表：

我一直在玩的代码是这样的：

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"}}
      );
}

这给了我一个很好的图表，看起来像这样：

在此处输入图像描述

我正在尝试使此图表适合我的网站的需求，为此，我需要将左侧的栏名称链接到另一个页面。因此，例如 2003 将是用户可以单击的链接，2004 等也是如此。

我试图做这样的事情：

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"}}
      );
}

但我只能希望它变得那么容易，但事实并非如此。有谁知道这是否可能？

score 16 · Accepted Answer

Manzoid 的回答很好，但是“仍然需要一些组装”，因为它只是显示一个警告框而不是跟随链接。这是一个更完整的答案，但它使条形图而不是标签可点击。我创建一个包含链接的DataTable ，然后从中创建一个 DataView以选择我想要显示的列。Then when the select event occurs, I just retrieve the link from the original DataTable.

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'link', 'Austria'],
          ['2003', 'http://en.wikipedia.org/wiki/2003',  1336060],
          ['2004', 'http://en.wikipedia.org/wiki/2004', 1538156],
          ['2005', 'http://en.wikipedia.org/wiki/2005', 1576579],
          ['2006', 'http://en.wikipedia.org/wiki/2006', 1600652],
          ['2007', 'http://en.wikipedia.org/wiki/2007', 1968113],
          ['2008', 'http://en.wikipedia.org/wiki/2008', 1901067]             
        ]);
       var view = new google.visualization.DataView(data);
       view.setColumns([0, 2]);

       var options = {title:"Yearly Coffee Consumption by Country",
            width:600, height:400,
            vAxis: {title: "Year"},
            hAxis: {title: "Cups"}};

       var chart = new google.visualization.BarChart( 
           document.getElementById('chart_div'));
       chart.draw(view, options);

       var selectHandler = function(e) {
          window.location = data.getValue(chart.getSelection()[0]['row'], 1 );
       }

       google.visualization.events.addListener(chart, 'select', selectHandler);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 900px;"></div>
  </body>
</html>

score 9 · Accepted Answer

这很重要，因为您看到的输出是 SVG，而不是 HTML。您示例中的那些标签（“2004”、“2005”等）嵌入在 SVG 文本节点中，因此在其中插入原始 HTML 标记不会呈现为 HTML。

解决方法是扫描包含目标值的文本节点（同样是“2004”、“2005”等）并用ForeignObject元素替换它们。 ForeignObject元素可以包含常规 HTML。然后这些需要或多或少地定位在原始 SVG 文本节点所在的位置。

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

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

次要注意，为了方便起见，其中有一些 jQuery，但您可以替换 $('text')为document.getElementsByTagName("svg")[0].getElementsByTagName("text").

score 6 · Accepted Answer

由于 SVG 嵌入路线（可以理解）对于您来说太麻烦了，所以让我们尝试一种完全不同的方法。假设您可以灵活地更改功能规范，例如bar是可点击的，而不是labels，那么这里有一个更简单的解决方案。

在此代码段中查找，alert这是您将自定义以执行重定向的部分。

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

  // Create and draw the visualization.
  var chart = new google.visualization.BarChart(document.getElementById('visualization'));
  chart.draw(data,
           {title:"Yearly Coffee Consumption by Country",
            width:600, height:400,
            vAxis: {title: "Year"},
            hAxis: {title: "Cups"}}
      );
  var handler = function(e) {
    var sel = chart.getSelection();
    sel = sel[0];
    if (sel && sel['row'] && sel['column']) {
      var year = rawData[sel['row'] + 1][0];
      alert(year); // This where you'd construct the URL for this row, and redirect to it.
    }
  }
  google.visualization.events.addListener(chart, 'select', handler);
}

score 1 · Accepted Answer

我显然没有足够的声誉点来直接评论以前的回复，所以我很抱歉作为一个新帖子这样做。manzoid 的建议很棒，但我发现了一个问题，看起来 Mark Butler 可能遇到了同样的问题（或者在不知不觉中回避了它）。

if (sel && sel['row'] && sel['column']) {

该行使第一个数据点无法单击。我在 1 月至 12 月的条形图上使用它，只有 2 月至 12 月是可点击的。从条件中删除 sel['row'] 允许 Jan 工作。不过，我不知道 if() 条件是否真的必要。

score 1 · Accepted Answer

这是另一种解决方案，它使用锚标签包装标签的每个文本标签。

不ForeignObject
可点击标签
可通过 css 设置样式（悬停效果）

这是一个示例：https ://jsfiddle.net/tokkonoPapa/h3eq9m9p/

/* find the value in array */
function inArray(val, arr) {
    var i, n = arr.length;
    val = val.replace('…', ''); // remove ellipsis
    for (i = 0; i < n; ++i) {
        if (i in arr && 0 === arr[i].label.indexOf(val)) {
            return i;
        }
    }
    return -1;
}

/* add a link to each label */
function addLink(data, id) {
    var n, p, info = [], ns = 'hxxp://www.w3.org/1999/xlink';

    // make an array for label and link.
    n = data.getNumberOfRows();
    for (i = 0; i < n; ++i) {
        info.push({
            label: data.getValue(i, 0),
            link:  data.getValue(i, 2)
        });
    }

    $('#' + id).find('text').each(function(i, elm) {
        p = elm.parentNode;
        if ('g' === p.tagName.toLowerCase()) {
            i = inArray(elm.textContent, info);
            if (-1 !== i) {
                /* wrap text tag with anchor tag */
                n = document.createElementNS('hxxp://www.w3.org/2000/svg', 'a');
                n.setAttributeNS(ns, 'xlink:href', info[i].link);
                n.setAttributeNS(ns, 'title', info[i].label);
                n.setAttribute('target', '_blank');
                n.setAttribute('class', 'city-name');
                n.appendChild(p.removeChild(elm));
                p.appendChild(n);
                info.splice(i, 1); // for speeding up
            }
        }
    });
}

function drawBasic() {
    var data = google.visualization.arrayToDataTable([
        ['City', '2010 Population', {role: 'link'}],
        ['New York City, NY', 8175000, 'hxxp://google.com/'],
        ['Los Angeles, CA',   3792000, 'hxxp://yahoo.com/' ],
        ['Chicago, IL',       2695000, 'hxxp://bing.com/'  ],
        ['Houston, TX',       2099000, 'hxxp://example.com'],
        ['Philadelphia, PA',  1526000, 'hxxp://example.com']
    ]);

    var options = {...};
    var chart = new google.visualization.BarChart(
        document.getElementById('chart_div')
    );

    chart.draw(data, options);

    addLink(data, 'chart_div');
}

score 0 · Accepted Answer

您应该使用格式化程序。

如果您用 HTML 替换值，那么排序将无法正常工作。

javascript - 将链接插入 Google Charts api 数据？

6 回答 6

Related

Reference