获取单击的跟踪

时间:2017-06-28 21:22:15

标签: javascript plotly

我有两个直方图,想要获得用户点击的栏。问题是click事件返回处于相同直方图间隔的所有点。

有没有办法获得点击的跟踪?

这里的假设是条形图层的存在,因此如果用户单击两个条形图的某处,系统将返回顶层的条形图。

var x1 = [];
var x2 = [];
var y1 = [];
var y2 = [];

var myPlot = document.getElementById('myDiv')

for (var i = 1; i < 500; i++) 
{
	k=Math.random();
	x1.push(k*5);
	x2.push(k*10);
	y1.push(k);
	y2.push(k*2);
}
var trace1 = {
  x: x1,
  y: y1,
  name: 'control',
  autobinx: false, 
  histnorm: "count", 
  marker: {
    color: "rgba(255, 100, 102, 0.7)", 
    line: {
      color:  "rgba(255, 100, 102, 1)", 
      width: 1
    }
  },  
  opacity: 0.5, 
  type: "histogram", 
  xbins: {
    end: 2.8, 
    size: 0.06, 
    start: .5
  }
};
var trace2 = {
  x: x2,
  y: y2, 
  autobinx: false, 
  marker: {
	        color: "rgba(100, 200, 102, 0.7)",
	         line: {
          color:  "rgba(100, 200, 102, 1)", 
          width: 1
    } 
			 }, 
  name: "experimental", 
  opacity: 0.75, 
  type: "histogram", 
  xbins: { 
    end: 4, 
    size: 0.06, 
    start: -3.2

  }
};
var data = [trace1, trace2];
var layout = {
  bargap: 0.05, 
  bargroupgap: 0.2, 
  barmode: "overlay", 
  title: "Sampled Results", 
  xaxis: {title: "Value"}, 
  yaxis: {title: "Count"}
};

Plotly.newPlot('myDiv', data, layout);

myPlot.on('plotly_click', function (data) {
  alert(data.points.length);
});
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv"></div>

0 个答案:

没有答案