14

jqPlotアイテムでアクションクリックを実行する際に問題が発生しています。他の誰かが何が問題なのかを明らかにしてくれることを願っています。

次のコードを使用して、(jqPlot チャート上に) クリック イベント ハンドラーをアタッチする jqPlot でレンダリングされた棒グラフがあります。

$.jqplot.eventListenerHooks.push(['jqplotClick', myClickHandler]);

myClickHandler は次のようになります。

function myClickHandler(ev, gridpos, datapos, neighbor, plot) {
  alert('you have triggered click action');
}

私の意図は、この単純な jqPlot 実装を使用することで、棒グラフ アイテムを含むチャート内の領域でクリックが配信されたときにアラート アクションがトリガーされることです。これは、すべてのデスクトップ ブラウザー (IE6/7/8/9、Chrome、Safari) で完全に機能します。

しかし、私が抱えている問題は、iPhone/iPad を使用してサイトにアクセスすると、上記のクリック アクションが奇妙な動作をすることを除いて、すべてが完全にレンダリングされることです。

棒グラフの項目に触れようとしても、 「クリック アクションがトリガーされました」という警告は表示されません。まるで何も起こっていないかのように。

しかし、チャートの空白部分をクリック(タッチ)しようとすると、アラートメッセージが正常に発火します。

何か案は?

4

3 に答える 3

1
$.jqplot.eventListenerHooks.push(['jqplotClick', myClickHandler]);

この呼び出しは、onClickハンドラーをイベントキャンバス全体にアタッチします。(このイベントキャンバスはプロットのサイズであり、機能するには他のすべてのキャンバスより上にある必要があります。つまり、機能させるには、z-indexを手動で変更する必要がある場合があります)。あなたの場合に起こっていると私が思うのはこれです:

  1. 「myClickHandler」メソッドをイベントキャンバスにアタッチしています。これは、シリーズまたはプロットの背景のどこにいても、イベントキャンバスがクリックされるたびに発生します。

  2. 棒グラフレンダラーの場合、このイベントキャンバスはシリーズキャンバスの下にあります(シリーズキャンバスの前に作成されているか、z-indexが低くなっています)。解決策は、チャートが作成された後、イベントキャンバスのz-indexを手動で増やすことです。この後、それが一番上になり、クリックイベントが正しく処理されます。

  3. このクリックイベントは、場所に関係なく、プロット上でクリックするたびに発生することを忘れないでください。解決策は、次のように「myClickHandler」メソッドの実行をフィルタリングすることです。

コード:

function myClickHandler(ev, gridpos, datapos, neighbor, plot) {
    if (isClickEventOverTheSeries(gridpos)) {
        alert('you have triggered click action');
    }
}

この例では、 gridposは、クリックイベントのx座標とy座標の2つのポイントを含む配列です。「isClickEventOverTheSeries」メソッドは、この座標の下にシリーズが描画されているかどうかをチェックする関数です。BarChartレンダラーでこれを実現する方法がわかりません-使用したことはありませんが、ラインレンダリングではそれをチェックするメソッドがあります...

お役に立てれば

于 2012-12-17T16:26:24.720 に答える
0

jqplot についてはわかりませんが、一般的に、タッチ デバイスではイベントmousedownとイベントの間でさらに多くのことが行われています。イベント自体が最終的に発生clickする前に、クリックを「失う」可能性が高くなります。、またはあなたの場合は「jqplotMouseDown」の方が良いでしょう。clickmousedown

于 2012-03-20T23:31:39.163 に答える
0

@PriorityMark が示唆するように、つまり明示的にz-indexon の値を設定することで、この問題を解決できるはずjqplot-event-canvasです。

それが行われる方法は、たとえば、問題が同様の性質のものであったこの回答に示されています。最初の変更の後、つまり、jqplot-overlayCanvas-canvas後ろに送信した後、前jqplot-series-canvasに置くのを忘れましたjqplot-event-canvas

于 2012-05-24T16:16:32.497 に答える