onClick Opción para Rickshaw Charting

Question

Me preguntaba si realmente hay un soporte listo para usar para el evento onclick en un punto de datos o si tengo que modificar la biblioteca para que funcione. Escaneé algunas partes del código fuente y no vi nada que permita vincular acciones de clics personalizados. El tutorial en su sitio tampoco muestra esta opción (http://code.shutterstock.com/rickshaw/).

Cualquier ayuda es apreciativa. Actualmente estoy evaluando entre flot, rickshaw y flotr2. Hasta ahora, ninguno de ellos satisface todos los requisitos y estoy muy sorprendido de que, a excepción de flot, no haya ninguna opción para el evento OnClick personalizado en otras bibliotecas. Vi que algunas personas agregaron alguna forma de hack-ish para flotr2, pero es muy específica solo para los gráficos de barras.

Answer 1

¿Has probado HighCharts.js? Es una biblioteca de JavaScript que se utiliza para crear diagramas y gráficos intelectivos.

http://www.highcharts.com/

Puede personalizar evento onclick para llamar a una función de JavaScript cuando planees usar Highcharts.

Answer 2

Esto es un poco un truco, pero tenía el mismo requisito. Ya tenía un objeto HoverDetail conectado, así que enganché en el evento onShow del objeto HoverDetail para almacenar el valor de la etiqueta x del elemento seleccionado.

(esto fue en una aplicación angular, así que por eso estoy estableciendo la variable de alcance)

var hoverDetail = new Rickshaw.Graph.HoverDetail({ 
    onShow: function(event){ 
     scope.data.activeDate = $(".x_label").text(); 
    }, 
    graph: graph 
}); 

Entonces, me puse en el controlador de clic normal a la gráfica, y accede a la variable almacenada por el controlador onShow allí.

Para obtener más información sobre cómo trabajar con el objeto HoverDetail y otras construcciones del carrito echar un vistazo a este screencast: http://tagtree.tv/d3-with-rickshaw-and-angular

Answer 3

He deriva este de HoverDetail, que parece funcionar hasta el momento:

Rickshaw.namespace('Rickshaw.Graph.ClickDetail'); 
Rickshaw.Graph.ClickDetail = Rickshaw.Class.create({ 

    initialize: function (args) { 
     this.graph = args.graph; 
     this.clickHandler = args.clickHandler || function(data){}; 
     this.lastEvent = null; 
     this._addListeners(); 
    }, 

    update: function (e) { 

     e = e || this.lastEvent; 
     if (!e) return; 
     this.lastEvent = e; 

     if (!e.target.nodeName.match(/^(path|svg|rect|circle)$/)) return; 

     var graph = this.graph; 

     var eventX = e.offsetX || e.layerX; 
     var eventY = e.offsetY || e.layerY; 

     var j = 0; 
     var points = []; 
     var nearestPoint; 
     var nearestValue; 

     this.graph.series.active().forEach(function (series) { 

      var data = this.graph.stackedData[j++]; 

      if (!data.length) 
       return; 

      var domainX = graph.x.invert(eventX); 

      var domainIndexScale = d3.scale.linear() 
       .domain([data[0].x, data.slice(-1)[0].x]) 
       .range([0, data.length - 1]); 

      var approximateIndex = Math.round(domainIndexScale(domainX)); 
      if (approximateIndex == data.length - 1) approximateIndex--; 

      var dataIndex = Math.min(approximateIndex || 0, data.length - 1); 

      for (var i = approximateIndex; i < data.length - 1;) { 

       if (!data[i] || !data[i + 1]) break; 

       if (data[i].x <= domainX && data[i + 1].x > domainX) { 
        dataIndex = Math.abs(domainX - data[i].x) < Math.abs(domainX - data[i + 1].x) ? i : i + 1; 
        break; 
       } 

       if (data[i + 1].x <= domainX) { 
        i++ 
       } else { 
        i-- 
       } 
      } 

      if (dataIndex < 0) dataIndex = 0; 
      var value = data[dataIndex]; 
      var distance = Math.sqrt(
       Math.pow(Math.abs(graph.x(value.x) - eventX), 2) + 
       Math.pow(Math.abs(graph.y(value.y + value.y0) - eventY), 2) 
      ); 

      if (!nearestPoint || distance < nearestPoint.distance) { 
       nearestValue = value; 
      } 
     }, this); 
     if(nearestValue){ 
      this.clickHandler(nearestValue); 
     } 
    }, 

    render: function (args) { 
     // Do nothing 
    }, 

    _addListeners: function() { 
     this.graph.element.addEventListener(
      'click', 
      function (e) { 
       this.update(e); 
      }.bind(this), 
      false 
     ); 
    } 
}); 

Uso de la siguiente manera:

new Rickshaw.Graph.ClickDetail({ 
      graph: graph, 
      clickHandler: function(value){ 
       alert(value.x + ' ' + value.y); 
      } 
     }); 

Answer 4

$('#chart').on('click', 'svg rect' ,function() { 
     x = $(this)[0].__data__.x; //The value of x 
     y = $(this)[0].__data__.y; //The value of y 
     }); 

probado y probado;)