我试图画一条直线上的鼠标点击plotlyjs与图像加载为背景。我能够得到坐标,但不能在连续的鼠标点击上画线。
在myPlot.on('plotly_click',function(data){ // some code })的帮助下,我能够获得坐标,但不知道如何在鼠标单击时绘制线条。任何想法或参考都会有帮助。先谢谢你了。this is the output of the plotly graph with background image。
<script src='https://cdn.plot.ly/plotly-2.16.1.min.js'></script>
<div id='plotlyContainer'></div>
var d3 = Plotly.d3;
var imgWidth = 0;
var imgHeight = 0;
const imgs = new Image();
let plotCon = document.getElementById('plotlyContainer');
imgs.onload = function() {
imgWidth = this.width;
imgHeight = this.height;
loadImgGraph(imgWidth, imgHeight);
}
imgs.src = 'https://i.stack.imgur.com/cRbua.png';
function loadImgGraph(imgWidth, imgHeight) {
var data = [
{
x: [],
y: [],
type: 'scatter'
}
];
var layout = {
autosize: false,
width: imgWidth,
height: imgHeight,
xaxis: {range: [0, 100], dtick: 25, ticks: 'outside', tickwidth: 2, gridcolor: "black", gridwidth: 2, mirror: true, linecolor: 'black', linewidth: 1},
yaxis: {range: [140, 0], dtick: 20, ticks: 'outside', tickwidth: 2, gridcolor: "black", gridwidth: 2, mirror: true, linecolor: 'black', linewidth: 1},
margin: {
l: 32,
r: 20,
b: 30,
t: 30
},
images: [
{
source: 'https://i.stack.imgur.com/cRbua.png',
xref: 'paper',
yref: 'paper',
x: 0,
y: 1,
sizex: 1,
sizey: 1,
sizing: 'fill',
opacity: 1,
layer: 'below'
}
],
};
Plotly.newPlot('plotlyContainer', data, layout).then(clickEv);
function clickEv() {
var xaxis = plotCon._fullLayout.xaxis;
console.log('xaxis',xaxis);
var yaxis = plotCon._fullLayout.yaxis;
console.log('yaxis',yaxis);
var l = plotCon._fullLayout.margin.l;
console.log('l',l);
var t = plotCon._fullLayout.margin.t;
console.log('t',t);
plotCon.addEventListener('mousemove', function(evt) {
var xInDataCoord = xaxis.p2c(evt.x - l);
var yInDataCoord = yaxis.p2c(evt.y - t);
Plotly.relayout(plotCon, 'title', ['x: ' + xInDataCoord, 'y : ' + yInDataCoord].join('<br>'));
});
plotCon.on('plotly_click', function(){
alert('You clicked this Plotly chart!');
});
}
}
1条答案
按热度按时间pengsaosao1#
在您的设置中,一种方法可以是:
此外,请参见
Plotly.react
以获得更新图的更有效方法。