web-dev-qa-db-ja.com

グーグルチャートAPIにリンクを追加する方法

グーグルチャートAPIにリンクを追加できますか？

例えば、

enter image description here

「仕事」または「食べる」へのリンクを追加するにはどうすればよいですか？

ありがとう！

apicharts
13
user503853

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>
14
Lucky Frank

ラッキーフランクの答えは良いですが、それはただ警告ボックスを印刷するだけです。これがより完全な答えです。リンクを 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は本当に素晴らしいです！これを書いた人に感謝します。

29
Mark Butler

解決策：次の方法でチャートの特定の選択を選択する必要があります。

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

1
MADHUR GUPTA

グーグル棒グラフへのリンクを追加する簡単な方法。

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;
                }
        });
1
Tuncay Elvanağaç