1

matplotlit を作成したブラウザーにグラフ画像 (x 軸と y 軸) を返します。マウスオーバーイベントが発生したときに軸の値を表示したいと思います。

4

2 に答える 2

2

jQueryを使用したソリューションは次のとおりです。

$('#myChart').mousemove(function(e){
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    // Do something with x and y;
});

詳細については、 http://docs.jquery.com/Tutorials:Mouse_Positionを参照してください。

于 2010-01-16T01:22:47.180 に答える
2

最近このようなことをしたとき、matplotlib からブラウザーに PNG を返しました。次に、プロットされたポイントに対応するピクセル値を使用して、PNG にイメージマップを適用しました。onmouseover イベントを使用して、ポイントに関するメタ データを含む「ツールチップ」(実際には絶対位置の div) をポップアップ表示しました。

この記事は私の努力の基礎を提供しましたが、彼の実装にはいくつかの問題があったことを覚えています (主に 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 を更新します。

于 2010-01-16T23:00:10.123 に答える