Question

我可以在google chart api中添加链接吗？

例如，

enter image description here

我如何添加“工作”或“吃饭”的链接？

谢谢！

Answer 1

幸运弗兰克的答案很好，但它只是打印一个警告框。这是一个更完整的答案。我将链接放在DataTable中，然后我创建了一个DataView，因此它们不会传递给图表。

<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([
          ['Task', 'link', 'Hours per Day'],
          ['Work', 'http://www.thefreedictionary.com/work', 11],
          ['Eat', 'http://www.thefreedictionary.com/eat', 2],
          ['Commute', 'http://www.thefreedictionary.com/commute', 2],
          ['Watch TV', 'http://www.thefreedictionary.com/television',2],
          ['Sleep',  'http://www.thefreedictionary.com/sleep', 7]
        ]);

        var view = new google.visualization.DataView(data);
        view.setColumns([0, 2]);

        var options = {
          title: 'My Daily Activities'
        };

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

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

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

顺便说一下，Google Charts API真的很棒！谢谢谁写了这个。

Answer 2

http://code.google.com/apis/chart/interactive/docs/events.html

<script type="text/javascript"> 
google.load('visualization', '1', {'packages':['corechart']}); 
google.setOnLoadCallback(drawChart);  
function drawChart()
{
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Name'); 
    data.addColumn('number', 'Count'); 

    data.addRows([ ['Value A',5 ],['Value B',61 ],['Value C',53 ],['Value D',22 ] ]); 
    var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
    chart.draw(data, {width: 400, height: 280, is3D: true, title: ''});

    google.visualization.events.addListener(chart, 'select', selectHandler); 

    function selectHandler(e)     {   
        alert(data.getValue(chart.getSelection()[0].row, 0));
    }

}   

</script>

Answer 3

向Google条形图添加链接的简单方法；

var data = google.visualization.arrayToDataTable([
     ['Element', 'Density', { role: 'style' }, { role: 'link' } ],
     ['Copper', 8.94, '#b87333', '/your/custom/link' ],
     ['Silver', 10.49, 'silver', '/your/custom/link' ],
     ['Gold', 19.30, 'gold', '/your/custom/link' ],
     ['Platinum', 21.45, 'color: #e5e4e2', '/your/custom/link' ]
  ]);

并在chart.draw之前;

 google.visualization.events.addListener(chart, 'select', function (e) {
            var selection = chart.getSelection();
                if (selection.length) {
                    var row = selection[0].row;
                    let link =data.getValue(row, 3);
                    location.href = link;
                }
        });

Answer 4

解决方案：您只需要通过以下方式选择图表的特定选择：

google.visualization.events.addListener(table, 'select', function() {
  var row = table.getSelection()[0].row;
  alert('You selected ' + data.getValue(row, 0));
  window.open(data.getValue(row, 0));
});

完整示例：jsfiddle.net

Answer 5

我只是使用echo命令。您可以使用php echo语句替换逗号之间的文本。例如，您可以使用sql数据的链接替换11：

['Work', 'http://www.thefreedictionary.com/work', < ? php echo $row_rs_age_total['Old']], $row_rs_age_total['Old']; ?>],

如何在谷歌图表API中添加链接

5 个答案: