jqueryモバイルチャートとflotチャートを使用してアプリケーションを開発しています。フロートバーチャート上にラベルが正しく配置されない
私には3つのタブがあります。 最初のタブにグラフを表示していますが、最初のタブにグラフをプロットすると、ラベルが間違って表示されてしまいます。jsFiddle code
しかし、 2番目または3番目のタブにグラフがあれば、私のグラフは正しいです。私のコードはここにありますjsfiddle code
どうしてですか?
jqueryモバイルチャートとflotチャートを使用してアプリケーションを開発しています。フロートバーチャート上にラベルが正しく配置されない
私には3つのタブがあります。 最初のタブにグラフを表示していますが、最初のタブにグラフをプロットすると、ラベルが間違って表示されてしまいます。jsFiddle code
しかし、 2番目または3番目のタブにグラフがあれば、私のグラフは正しいです。私のコードはここにありますjsfiddle code
どうしてですか?
:
はデモを更新しました。 私はただ変更する必要がありますplot.Offset()
にplot.getPlotOffset()
それは正しく動作します。オフセット
() - はevent.pageX/Y(マウス 位置を計算するためのインスタンスのために有用な、文書に 相対グリッド内の描画領域のオフセットを引いこのオフセットは、画素位置 で返しプロットの内側)。
getPlotOffset() - グリッドが「右」、「上」、 「底部」、「左」などのキャンバスのエッジからの距離に物体 としてキャンバス内に有することオフセットを取得します。つまり、中心に が置かれたキャンバスに円を描くと、その中心が最も上になり、グリッドの角は となります。
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/
このctx.translate(7,3)をハードコーディングします。異なるレイアウトに影響しますか?そして、異なる高さの異なるタブにあるグラフはなぜですか? –
しかし、値がまだ最上部のラベルをボックスの端の上に置くことができる方法:[jsfiddle.net/Sp8MP/8/] (http://jsfiddle.net/Sp8MP/8/)または[disappear](http ://jsfiddle.net/Sp8MP/9/)すべて一緒に。これはおそらく別の問題です。 – HeyWatchThis
問題はあなたのjsfiddlesを実験しているので、 'ui-content'の' padding'値に関連しています...しかし、それを修正しようとすると別の問題です:-( – ManseUK
あなたはそれが関連していると確信していますか?それは2番目のタブで働くからです。最初のタブでプロッティングが始まると思うのですが、ドキュメントが準備できていないと思っています。そして、誤って配置されているラベルは、バー幅と高さによって動的に調整されます。 –
イムはかなり浮かれていますが、非常に奇妙に見えます....ボタンのクリックで描画をトリガーするようにコードを更新しました。グラフがタブ1上にあるときは、ラベルは描画されませんでした。タブ2に対して正常に動作しました!がんばろう ! – ManseUK