我有两个直方图,想要获得用户点击的栏。问题是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>