javascript - getelementatevent - pie chart js

Chart.js: gráfico de barra haga clic en eventos

Question

Acabo de empezar a trabajar con Chart.js y me estoy frustrando muy rápidamente. Tengo mi gráfico de barras apiladas funcionando, pero no puedo hacer que los "eventos" de clic funcionen.

He encontrado un comentario en GitHub por nnnick de Chart.js que indica que usar la función getBarsAtEvent , aunque esta función no se puede encontrar en la documentación de Chart.js (adelante, haz una búsqueda). La documentación menciona la función getElementsAtEvent de la referencia del chart , pero eso es solo para los gráficos de líneas.

Configuré un detector de eventos (de la manera correcta) en mi elemento de lienzo:

canv.addEventListener(''click'', handleClick, false);

... aún en mi función chart.getBarsAtEvent , chart.getBarsAtEvent es indefinido!

Ahora, en el documento Chart.js, hay una declaración acerca de una forma diferente de registrar el evento de clic para el gráfico de barras. Es muy diferente del nnnick de nnnick en GitHub de hace 2 años.

En los valores predeterminados del gráfico global , puede establecer una función onClick para su gráfico. onClick una función onClick a mi configuración de gráfico, y no hizo nada ...

Entonces, ¿cómo diablos puedo hacer que la devolución de llamada al hacer clic para mi gráfico de barras?

Cualquier ayuda sería muy apreciada. ¡Gracias!

PD: no estoy usando la compilación maestra de GitHub. Lo intenté, pero seguía gritando que el require is undefined y no estaba listo para incluir CommonJS solo para poder usar esta biblioteca de gráficos. Preferiría escribir mis propios cuadros de peligros. En su lugar, descargué y estoy usando la versión de compilación estándar que descargué directamente desde el enlace en la parte superior de la página de documentación .

EJEMPLO: Aquí hay un ejemplo de la configuración que estoy usando:

var chart_config = {
    type: ''bar'',
    data: {
        labels: [''One'', ''Two'', ''Three''],
        datasets: [
            {
                label: ''Dataset 1'',
                backgroundColor: ''#848484'',
                data: [4, 2, 6]
            },
            {
                label: ''Dataset 2'',
                backgroundColor: ''#848484'',
                data: [1, 6, 3]
            },
            {
                label: ''Dataset 3'',
                backgroundColor: ''#848484'',
                data: [7, 5, 2]
            }
        ]
    },
    options: {
        title: {
            display: false,
            text: ''Stacked Bars''
        },
        tooltips: {
            mode: ''label''
        },
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            xAxes: [
                {
                    stacked: true
                }
            ],
            yAxes: [
                {
                    stacked: true
                }
            ]
        },
        onClick: handleClick
    }
};

Answer 1

¡Bien hecho! Sin embargo, esto parece devolver el valor de los datos que se grafican, que en muchos casos podría aparecer más de una vez, por lo que no queda claro en qué se hizo clic.

Esto devolverá la etiqueta de datos reales de la barra en la que se hace clic. Encontré esto más útil al profundizar en una categoría.

chart_config.data.labels[activeElement[0]._index]

Answer 2

Digamos que usted declaró un gráfico utilizando un método como este:

  window.myBar = new Chart({chart_name}, {
       type: xxx,
       data: xxx,
       events: ["click"],
       options: {
           ...
       }
  });

Una buena forma de declarar los eventos de un clic implicaría escuchar el clic del lienzo, así:

({chart_name}.canvas).onclick = function(evt) {
     var activePoints = myBar.getElementsAtEvent(evt);
     // let''s say you wanted to perform different actions based on label selected
     if (activePoints[0]._model.label == "label you are looking for") { ... }
}

Answer 3

Encontré esta solución en https://github.com/valor-software/ng2-charts/issues/489

public chartClicked(e: any): void {
  if (e.active.length > 0) {
  const chart = e.active[0]._chart;
  const activePoints = chart.getElementAtEvent(e.event);
  if ( activePoints.length > 0) {
   // get the internal index of slice in pie chart
   const clickedElementIndex = activePoints[0]._index;
   const label = chart.data.labels[clickedElementIndex];
   // get value by index
   const value = chart.data.datasets[0].data[clickedElementIndex];
   console.log(clickedElementIndex, label, value)
  }
 }
}

Answer 4

Hola, este es el evento de clic en las opciones que obtiene valores de los ejes x e y

onClick: function(c,i) {
    e = i[0];
    console.log(e._index)
    var x_value = this.data.labels[e._index];
    var y_value = this.data.datasets[0].data[e._index];
    console.log(x_value);
    console.log(y_value);
}

Answer 5

Pude hacer este trabajo de otra manera. Puede que no sea compatible, pero a veces, encuentro que ni la etiqueta ni el valor son adecuados para obtener la información necesaria para completar un desglose.

Entonces, lo que hice fue agregar un conjunto personalizado de atributos a los datos:

var ctx = document.getElementById("cnvMyChart").getContext("2d");
if(theChart != null) {theChart.destroy();}
theChart = new Chart(ctx, {
type: typ,
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datakeys: ["thefirstone","thesecondone","thethirdone","thefourthone","thefifthone","thesixthone"],
datasets: [{
    label: ''# of Votes'',
    data: [12, 19, 3, 5, 2, 3],

... etc

Luego, cuando necesito introducir la clave de obtención de detalles en otra llamada ajax, pude obtenerla con esto:

var theDrillThroughKey = theChart.config.data.datakeys[activePoints[0]._index];

Así que realmente no estoy seguro de que sea apropiado agregar elementos personalizados en los datos para el gráfico, pero está funcionando hasta ahora en Chrome, IE y Firefox. Necesitaba poder poner más información en la obtención de detalles de lo que realmente quería mostrar.

Ejemplo de la cosa completa: https://wa.rrdsb.com/chartExamples

¿Pensamientos?

Answer 6

Logré encontrar la respuesta a mi pregunta mirando el código fuente de Chart.js .

Proporcionado en la línea 3727 de Chart.js, Standard Build, es el método .getElementAtEvent . Este método me devuelve el "elemento del gráfico" en el que se hizo clic. Aquí hay suficientes datos para determinar qué datos se mostrarán en una vista detallada del conjunto de datos en el que se hizo clic.

En el primer índice de la matriz devuelta por chart.getElementAtEvent hay un valor _datasetIndex . Este valor muestra el índice del conjunto de datos en el que se hizo clic.

La barra específica en la que se hizo clic, creo, se nota con el valor _index . En mi ejemplo en mi pregunta, _index apuntaría a One en chart_config.data.labels .

Mi función handleClick ahora se ve así:

function handleClick(evt)
{
    var activeElement = chart.getElementAtEvent(evt);

..where chart es la referencia del chart creado por chart.js al hacer:

chart = new Chart(canv, chart_config);

El conjunto específico de datos que fue seleccionado por el clic se puede encontrar como:

chart_config.data.datasets[activeElement[0]._datasetIndex].data[activeElement[0]._index];

Y ahí lo tienes. Ahora tengo un punto de datos desde el que puedo crear una consulta para mostrar los datos de la barra en la que se hizo clic.