plotoptions - Highcharts: área en la que se puede hacer clic

highcharts tooltip

Question

Tengo un cuadro de Highchart de área. Se agregó un evento de clic al gráfico, como este:

plotOptions: {
                area: {
                    marker: {
                        enabled: false
                    },
                    cursor: ''Pointer'',
                    stacking: ''normal'',
                    events: {
                        click: function(event) {
                          alert("hi there");
                        }
                    }                   
                }
            }

Funciona bien. El problema es que solo puede hacer clic muy cerca de una línea, pero no en el área debajo de la línea, no se puede hacer clic.

¿Hay algún entorno que pase por alto?

Answer 1

De acuerdo con la documentación de Highcharts , el evento de click solo cubre hacer clic en la serie en sí, por lo que no registrará los eventos de clic para hacer clic debajo de la línea.

Para hacer lo que desea, puede necesitar manejar las cosas por su cuenta utilizando el evento mouseOver . Desafortunadamente, este evento se dispara cuando el mouse se desplaza sobre el gráfico, lo que significa que necesitarás averiguar dónde está el mouse en el gráfico, y así sucesivamente.

De forma alternativa, podría modificar el código fuente de los Highcharts para adaptarlo a sus necesidades o ampliarlo, pero en cualquier caso, no creo que esto pueda hacerse fácilmente.

Answer 2

Puede usar el evento gráfico de clics al hacer clic en el fondo de la trama, así:

$(function () {
    // create the chart
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: ''container'',
            events: {
                click: function(event) {
                    alert (''x: ''+ event.xAxis[0].value +'', y: ''+
                          event.yAxis[0].value);
                }
            }        
        },
        xAxis: {
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    });
});​

Aquí está el enlace a la documentación:

http://www.highcharts.com/ref/#chart-events--click

Espero que ayude.

Answer 3

En realidad, puedes hacer exactamente lo que quieras de la caja. La respuesta elegida fue solo mirar eventos para el objeto PlotOptions; necesita ver eventos para el objeto Chart.

Documentación y ejemplos en: http://www.highcharts.com/ref/#chart-events--click

Cuando haces clic en el fondo, se dispara el evento.

chart: {
        renderTo: ''container'',
        events: {
            click: function(event) {
                alert (''x: ''+ event.xAxis[0].value +'', y: ''+
                      event.yAxis[0].value);
            }
        }        
    },

Answer 4

Puede usar esta función trackByArea: true area trackByArea: true en plotOptions

trackByArea: Boolean

Desde 1.1.6 Si toda el área o solo la línea debe responder a la información sobre herramientas mouseover y otros eventos mouse o touch. El valor predeterminado es falso.

Combine esto con el click event

click: Función

Incendios cuando se hace clic en la serie. La palabra clave this se refiere al objeto de la serie en sí. Un parámetro, evento, se pasa a la función. Contiene información de eventos comunes basada en jQuery o MooTools según la biblioteca que se utilice como base para Highcharts. Además, event.point contiene un puntero al punto más cercano en el gráfico.

ex:

plotOptions: { area: { **trackByArea: true**, marker: { enabled: false },..