Как добавить ссылки в google chart api

Можно ли добавлять ссылки в google chart api?

Например,

Как я могу добавить ссылку на "Работа" или "Ешь"?

Спасибо!

Ответ 1

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>

Ответ 2

Ответ 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>

Кстати, API Google Charts действительно потрясает! Спасибо, кто написал это.

Ответ 3

Простой способ добавить ссылку на Google Barchart;

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' ]
  ]);

и до диаграммы.

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

Ответ 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

Ответ 5

Я просто использую команду echo. Вы можете просто заменить текст между запятой выражением php echo. например, вы могли бы заменить 11 ссылкой на данные sql:

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