Rickshaw Charting için onClick Opsiyonu

Question

Bir veri noktasında onclick olayı için gerçekte bir destek olup olmadığını merak ettim ya da çalışmasını sağlamak için kütüphaneyi değiştirmek zorundayım. Kaynak kodun bazı bölümlerini taradım ve özel tıklama eylemlerine izin veren hiçbir şey görmedim. Sitelerinde bulunan eğitici de bu seçeneği göstermiyor (http://code.shutterstock.com/rickshaw/).

Herhangi bir yardım için minnettarız. Şu anda flot, çekçek ve flotr2 arasında değerlendiriyorum. Şimdiye kadar bunların hiçbiri tüm gereksinimleri karşılamıyor ve flot haricinde çok şaşırdım, diğer kütüphanelerde özel onClick olayı için bir seçenek yok. Bazı insanların flotr2 için hack-ish yolunu eklediğini gördüm, ancak sadece çubuk grafikler için çok özel.

Answer 1

HighCharts.js'yi denediniz mi? Kompozit grafikler ve grafikler oluşturmak için kullanılan bir javascript kütüphanesi.

http://www.highcharts.com/

Sen Highcharts kullanarak whe bir javascript işlevi çağırmak için onclick olayı özelleştirebilirsiniz.

Answer 2

Bu biraz kesmek, ama aynı gereksinimi vardı. Zaten bir HoverDetail nesnesi bağladım, bu yüzden seçili öğenin x etiketinin değerini depolamak için HoverDetail nesnesinin onShow olayına bağladım.

(Bu açısal app, bu yüzden kapsamına değişkeni ayarlıyorum yüzden) Sonra

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

, ben grafiğe Normal tıklama işleyicisi bağladım ve depoladığı değişkeni erişilen orada onShow işleyicisi. Şimdiye kadar işe Ben görünüyor HoverDetail, bu türetilmiş ettik http://tagtree.tv/d3-with-rickshaw-and-angular

Answer 3

: HoverDetail nesne ve diğer Rickshaw yapıları ile çalışmak konusunda daha fazla bilgi için

bu screencast bir göz

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 
     ); 
    } 
}); 

böyle

Kullanımı:

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 
     }); 

Denenmiş ve test edilmiş;)