0

Tenho um Dashboard feito em PHP e utilizo a biblioteca Chart.js.

No Dashboard, possuo alguns gráficos que são alimentados no PHP, como nesse exemplo:

inserir a descrição da imagem aqui

E estou com uma dúvida, quando eu clicar em alguma coluna do gráfico, quero pegar o nome dela e mostrar em um alert do JS mesmo.

Resumindo, quando eu clicar em alguma barra pertencente ao G1, quero que mostre em um alert o nome dele, Exemplo: "Você clicou em G1". O mesmo com o G4 ou qualquer outro que tiver no gráfico. Como posso fazer isso?

Código HTML:

      <div class="box-body">
          <canvas id="grupo" height="80px"></canvas>
      </div>

Código JS:

  var ctx5 = document.getElementById("grupo").getContext('2d');
  var container5 = new Chart(ctx5, {
     type: 'bar',
     data: {
        labels: label_grupo, // variavel alimentada pelo PHP
        datasets: [{
           label: "Total",
           backgroundColor: '#4dbd74',
           data: data_grupo_total, // variavel alimentada pelo PHP
        }, {
           label: "Alfa",
           backgroundColor: '#20a8d8',
           data: data_grupo_macho, // variavel alimentada pelo PHP
        }, {
           label: "Beta",
           backgroundColor: '#4c4c4c',
           data: data_grupo_femea, // variavel alimentada pelo PHP
        }]
     },
     options: {
        tooltips: {
           mode: 'index',
           intersect: false
        },
        scales: {
           yAxes: [{
              scaleLabel: {
                 display: true,
                 labelString: "Quantidade"
              }
           }],
           xAxes: [{
              gridLines: {
                 color: "rgba(0, 0, 0, 0)",
              },
              ticks: {
                 autoSkip: false,
                 fontSize: 11,
                 beginAtZero:true
              }
           }]
        },
        legend: {
           labels: {
              boxWidth: 12
           },
           position: "bottom",
        },
     }
  });

1 Resposta 1

1

acho que a forma mais organizada seria assim, adicione a propriedade onClick no objeto options

options:{
    onClick: minhaFuncao
}

e crie a respectiva função:

function minhaFuncao(event, array){
    if(array[0]){
        // console.log(array);
    }
}

Documentação Chart.js #Eventos

var config = {};
var ctx = document.getElementById("canvas").getContext("2d");
var Charts= new Chart.Scatter(ctx, config);

canvas.onclick = function(event){
    var pontosAtivos = Charts.getElementsAtEvent(event);
    var primeiroPonto = pontosAtivos[0];

    if(primeiroPonto !== undefined){
        var label = Charts.data.labels[primeiroPonto._index];
        var value = Charts.data.datasets[primeiroPonto._datasetIndex].data[primeiroPonto._index];
        alert(label + ": " + value.x);
        alert(label + ": " + value.y);
     }
};
7
  • Opa, dei uma lida na documentação e desconhecia essa manipulação de eventos, acabei conseguindo fazer, muito obrigado. O exemplo que desenvolvi está aqui: jsfiddle.net/b7m3tyc4
    – Piupz
    Commented 24/07/2018 às 17:13
  • 1
    eu também utilizo essa lib, muito versátil =) Commented 24/07/2018 às 17:15
  • Só uma dúvida que fiquei, a área que ele reconhece é só das barras e se eu quisesse a área branca tbm? Aqui uma imagem pra explicar melhor, a parte com retângulo roxo é como funciona o evento click e a parte verde é como eu desejo mas nao reconhece: imgur.com/a/32OoV26
    – Piupz
    Commented 24/07/2018 às 18:02
  • 1
    você consegue especificar com os eventos, tanto click na barra como fora da para se basear usando coordenadas X,Y, Commented 24/07/2018 às 18:04
  • 1
    adicionei a resposta, mas realmente há necessidade do click fora dentro do canvas fora das barras? o que pretende? Commented 24/07/2018 às 18:34

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 .