我返回一個圖表圖像(帶有軸x和y)到瀏覽器中創建了我的matplotlit。 現在我想顯示鼠標懸停事件時的軸值。在圖表圖像中顯示鼠標懸停事件的軸值
1
A
回答
2
當我最近做了這樣的事情時,我從matplotlib返回了一個PNG到瀏覽器。然後,我使用與繪製的點對應的像素值將圖像映射應用於PNG。我使用了一個onmouseover事件來彈出一個包含關於該點的元數據的'tooltip'(實際上只是一個絕對定位的div)。
這個article爲我的努力提供了基礎,但我記得他的實現中存在一定的問題(主要是由於matplotlib api的變化)。如果這個問題在週一還在徘徊,我會用我的實現中的特定代碼更新這個答案(我目前沒有訪問我的工作機器)。
編輯:正如所承諾的示例代碼
import matplotlib.pyplot as plt
dpi = 96
fig = plt.figure(figsize=(8,8),dpi=dpi)
imgWidth = fig.get_figwidth() * dpi ## this is the actual pixel size of the plot
imgHeight = fig.get_figheight() * dpi ## this is the actual pixel size
my_lines = []
my_lines.append(plt.plot(Xs,Ys,marker='o')[0]) # add a line object to plot
mapHTML = '<MAP name="curveMap">'
for lineObj in my_lines:
## convert the points to pixel locations, for pop-ups
lineObj._transform_path()
path, affine = lineObj._transformed_path.get_transformed_points_and_affine()
path = affine.transform_path(path)
for real,pixel in zip(lineObj.get_xydata(),path.vertices):
mapHTML+='''<AREA shape=\"circle\" coords=\"%i,%i,5\" href=\"javascript: void(0);\" onmouseout=\"outFly();\" onmouseover=\"javascript: popFly\(event,\\'%s\\',%i,%i\)\" />''' % (pixel[0],imgHeight-pixel[1],lineName,real[0],real[1])
mapHTML += '</MAP>'
fig.savefig(file(plot_file,"w"),format='png',dpi=dpi)
plt.close(fig)
plotHTML = '''<img src="/getPlot?uniq=%f" width="%i" height="%i" ismap usemap="#curveMap" onload="imageLoadCallback();" id="curPlot" />''' % (time.time(),imgWidth,imgHeight)
return "({'plotHTML':'%s','mapHTML':'%s'})" % (plotHTML,mapHTML)
你會看到我寫的圖像爲PNG文件,然後返回JSON。我使用JavaScript來更新新的img和圖像映射的DIV。
2
下面是使用jQuery的解決方案:
$('#myChart').mousemove(function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
// Do something with x and y;
});
相關問題
- 1. 顯示鼠標懸停的圖像
- 2. 如何在鼠標懸停在圖像中時顯示圖像?
- 3. Div圖像和鼠標懸停事件
- 4. 觸發鼠標懸停事件時顯示圖像
- 5. 在鼠標懸停/鼠標移動時顯示X軸值
- 6. 將鼠標懸停在另一圖像上時顯示圖像
- 7. 鼠標懸停在圖像上時可點擊圖標顯示
- 8. 鼠標懸停的圖像模糊圖像和顯示文字
- 9. 將鼠標懸停在列表圖像
- 10. 圖像懸停 - 鼠標顯示爲文本圖標?
- 11. 鼠標懸停在LibreOffice中的文本時顯示圖像
- 12. 在windows窗體中的鼠標懸停上顯示圖像?
- 13. 懸停圖像? (鼠標)
- 14. 如何在asp上的鼠標懸停事件上顯示圖像:linkButton
- 15. Jquery:圖像地圖區域上的鼠標懸停事件
- 16. 使用鼠標懸停在其他div中顯示圖像
- 17. 當鼠標懸停在圖像上時標籤隱藏/顯示?
- 18. 如何在懸停我的鼠標的圖像上顯示懸停效果
- 19. 在其他圖像的鼠標懸停上顯示特定位置的圖像
- 20. 將鼠標懸停在圖像上時顯示文字
- 21. AngularJS在鼠標懸停上顯示圖像
- 22. AJAX鼠標懸停在圖像上,顯示HTML內容
- 23. 將鼠標懸停在按鈕上時顯示圖像
- 24. 如何在鼠標懸停上顯示多個圖像php
- 25. 在鼠標懸停時顯示大圖像與自動位置
- 26. 將鼠標懸停在文本上時顯示圖像
- 27. 顯示圖像時,鼠標懸停在文字塊,WPF
- 28. 當鼠標懸停在鏈接上時顯示圖像
- 29. 當鼠標懸停在圖像上時顯示按鈕(rails image_tag)
- 30. 鼠標懸停在gridview行顯示圖像