2012-02-24 16 views
1

jqueryモバイルチャートとflotチャートを使用してアプリケーションを開発しています。フロートバーチャート上にラベルが正しく配置されない

私には3つのタブがあります。 最初のタブにグラフを表示していますが、最初のタブにグラフをプロットすると、ラベルが間違って表示されてしまいます。jsFiddle code

しかし、 2番目または3番目のタブにグラフがあれば、私のグラフは正しいです。私のコードはここにありますjsfiddle code

どうしてですか?

+0

問題はあなたのjsfiddlesを実験しているので、 'ui-content'の' padding'値に関連しています...しかし、それを修正しようとすると別の問題です:-( – ManseUK

+0

あなたはそれが関連していると確信していますか?それは2番目のタブで働くからです。最初のタブでプロッティングが始まると思うのですが、ドキュメントが準備できていないと思っています。そして、誤って配置されているラベルは、バー幅と高さによって動的に調整されます。 –

+0

イムはかなり浮かれていますが、非常に奇妙に見えます....ボタンのクリックで描画をトリガーするようにコードを更新しました。グラフがタブ1上にあるときは、ラベルは描画されませんでした。タブ2に対して正常に動作しました!がんばろう ! – ManseUK

答えて

0

はデモを更新しました。 私はただ変更する必要がありますplot.Offset()plot.getPlotOffset() それは正しく動作します。オフセット

() - はevent.pageX/Y(マウス 位置を計算するためのインスタンスのために有用な、文書に 相対グリッド内の描画領域のオフセットを引いこのオフセットは、画素位置 で返しプロットの内側)。

getPlotOffset() - グリッドが「右」、「上」、 「底部」、「左」などのキャンバスのエッジからの距離に物体 としてキャンバス内に有することオフセットを取得します。つまり、中心に が置かれたキャンバスに円を描くと、その中心が最も上になり、グリッドの角は となります。

1

plotOffsetのように見えますが、コンテナが表示されるかどうかによって計算が異なります。これは、jQueryがdisplay: noneで隠されている要素の高さを計算できないためだと思います。最初の例ではplotOffsetはあなたにこの数字を与える:

{left: 22, top: 41} 

{left: 7, top: 4} 

あなたがctx.translate(plotOffset.left, plotOffset.top);を呼び出すときのためにしながら、あなたは明らかにキャンバス上の異なるlablesポジションを持つことになります。

ctx.translate(7, 3); // No need to care of plotOffset left and top 

はなくplotOffset値のstaticaly定義されたラベルの余白を使用します。

最も単純な回避策は、このようなもので、あなたの翻訳を正規化するだろうです。私はそれを得た
http://jsfiddle.net/Sp8MP/5/
​​

+0

このctx.translate(7,3)をハードコーディングします。異なるレイアウトに影響しますか?そして、異なる高さの異なるタブにあるグラフはなぜですか? –

+0

しかし、値がまだ最上部のラベルをボックスの端の上に置くことができる方法:[jsfiddle.net/Sp8MP/8/] (http://jsfiddle.net/Sp8MP/8/)または[disappear](http ://jsfiddle.net/Sp8MP/9/)すべて一緒に。これはおそらく別の問題です。 – HeyWatchThis

関連する問題