onClick Option for Rickshaw Charting

Question

Мне было интересно, есть ли на самом деле готовая поддержка события onclick в точке данных или мне нужно изменить библиотеку, чтобы она работала. Я просмотрел некоторые части исходного кода, и я не видел ничего, что позволяет связывать пользовательские действия с кликом. Учебник на своем сайте также не показывает эту опцию (http://code.shutterstock.com/rickshaw/).

Любая помощь является признательной. В настоящее время я оцениваю между флотом, рикшей и флот2. До сих пор ни один из них не удовлетворял всем требованиям, и я очень удивлен, за исключением флота, нет возможности для пользовательского события onClick в других библиотеках. Я видел, что некоторые люди добавили некоторый хакерский путь для flotr2, но это очень специфично только для гистограмм.

Answer 1

Вы пробовали HighCharts.js? Его библиотека javascript, которая используется для создания целых диаграмм и графиков.

http://www.highcharts.com/

Вы можете настроить OnClick события для вызова в яваскрипте функции Whe с помощью Highcharts.

Answer 2

Это немного взломать, но у меня было такое же требование. У меня уже был объект HoverDetail, поэтому я подключился к событию onShow объекта HoverDetail, чтобы сохранить значение метки x выбранного элемента.

(Это было в угловом приложении, так вот почему я устанавливаю переменный на объеме)

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

Затем я подключил нормальный обработчик щелчка на графику, и доступ к переменному сохраняемому обработчик onShow.

Для получения дополнительной информации о том, как работать с объектом HoverDetail и других Рикша конструкций взглянуть на этот скринкаст: http://tagtree.tv/d3-with-rickshaw-and-angular

Answer 3

Я вывел это из HoverDetail, который, кажется, работает до сих пор:

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

Использование так:

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

Пробовал и тестировал;)