3

Como posso colocar um link em alguma parte do gráfico com Google Charts, um link diferente para cada divisão do gráfico.

Estou usando um PieChart, segue link do jsfiddle e da página onde eu peguei o código.

Obs: Caso seja possível fazer isso com o highcharts, para mim não tem diferença.

0

1 Resposta 1

1

A melhor forma de resolver seu problema é usando os Eventos do Google Charts. No exemplo abaixo eu seto o evento de select (evento de clicar em uma das partes do gráfico), dentro dele é possível você acessar os dados da parte selecionada e assim pode criar seus tratamentos para redirecionar usando window.location, tendo assim o funcionando igual a de um link. Segue jsfiddle

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([
        ['MG', 5],
        ['SP', 61],
        ['RS', 53],
        ['DF', 22]
    ]);
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, {
        width: 400,
        height: 280,
        is3D: true,
        title: ''
    });

    //Seta o callback no gráfico
    google.visualization.events.addListener(chart, 'select', selectHandler);

    //função callback para evento de select
    function selectHandler(e) {
        //alerta com os dados selecionados
        alert(data.getValue(chart.getSelection()[0].row, 0));
        // aqui você pode adicionar um window.location para funcionar como o link
    }

}
1
  • Deu certinho, valeu bruno!! Commented 4/09/2015 às 15:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .