Question

我一直在Google图表游戏中玩谷歌图表：

我一直在玩的代码是：

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

这给了我一个很好看的图表：

enter image description here

我想让这个图表符合我网站的需求，为此，我需要将左边的栏名称链接到另一个页面。因此，例如，2003年将是用户可以单击ans的链接，因此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"}}
      );
}

但我只能希望它变得那么容易而且它不是。有谁知道这是否可能？

Answer 1

Manzoid的答案很好，但“仍然需要一些装配”，因为它只显示一个警告框而不是跟随链接。这是一个更完整的答案，但它使条形可点击而不是标签。我创建了一个包含链接的DataTable，然后从中创建DataView以选择我想要显示的列。然后当select事件发生时，我只是从原始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>

Answer 2

这是非常重要的，因为您看到的输出是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")。

Answer 3

由于SVG嵌入路径（可以理解）太毛茸茸，你想要捣乱，让我们尝试一种完全不同的方法。假设你可以灵活地改变你的功能规范，这样 bars 是可点击的，而不是标签，那么这是一个更简单的解决方案。

在此代码段中查找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);
}

Answer 4

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

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

该行使第一个数据点无法点击。我在Jan-Dec条形图上使用它，只有2月到12月可以点击。从条件中删除sel ['row']允许Jan工作。我不知道if（）条件确实是必要的。

Answer 5

您应该使用formatters。

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

Answer 6

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

否.hidden{ display: none; }
可点击标签
由css设定样式（悬停效果）

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

<div>
  <label class="desc" for="get-latest-yn">Latest Binary?</label>
  <div>
    <select id="get-latest-yn" name="get-latest-yn" class="field select medium" tabindex="1">
      <option value="none"></option>
      <option value="true">Yes</option>
      <option value="false">No</option>
    </select>
  </div>
</div>
<div id="version-num" class="hidden">
  clicked yes
</div>

<div id="jar-name" class="hidden">
  clicked no
</div>

将链接插入Google Charts api数据？

6 个答案: