1

最新バージョンのjqPlot（v1.0.0b2_r1012）を使用してヒストグラムをプロットしています。

シングルクリックイベントをキャッチするために、次のように「jqplotDataClick」を使用しています。

$('#myHistogram').bind('jqplotDataClick', function(ev, seriesIndex, pointIndex, data) {
    // Do something
});

代わりにダブルクリックイベントをキャッチすることは可能ですか？

残念ながら、jqplot.barRenderer.jsでそのようなイベントを見つけることができませんでした。

アップデート：

jqplot.barRenderer.jsファイルに次の2つの変更を加えました。

jqplotDblClickイベントを登録する

$.jqplot.BarRenderer.prototype.init = function(options, plot) {
    ...
    ...
    plot.postInitHooks.addOnce(postInit);
    plot.postDrawHooks.addOnce(postPlotDraw);
    plot.eventListenerHooks.addOnce('jqplotMouseMove', handleMove);
    plot.eventListenerHooks.addOnce('jqplotMouseDown', handleMouseDown);
    plot.eventListenerHooks.addOnce('jqplotMouseUp', handleMouseUp);
    plot.eventListenerHooks.addOnce('jqplotClick', handleClick);
    plot.eventListenerHooks.addOnce('jqplotDblClick', handleDblClick);
    //$.jqplot.eventListenerHooks.push(['jqplotDblClick', handleDblClick]); I've also tried this but without any luck
    plot.eventListenerHooks.addOnce('jqplotRightClick', handleRightClick); 
};

handleDblClick関数を実装する

function handleDblClick(ev, gridpos, datapos, neighbor, plot) {
    if (neighbor) {
        var ins = [neighbor.seriesIndex, neighbor.pointIndex, neighbor.data];
        var evt = jQuery.Event('jqplotDataDblClick');
        evt.pageX = ev.pageX;
        evt.pageY = ev.pageY;
        plot.target.trigger(evt, ins);
    }
}

次に、JavaScriptファイルでjqplotDataDblClickを次のようにバインドします。

$('#myHistogram').bind('jqplotDataDblClick', function(ev, seriesIndex, pointIndex, data) {
    alert("Ohayo!"); // Good morning in Japanese
});

ただし、垂直棒グラフの1つをダブルクリックしても、ダブルクリックイベントは発生しません。「jqplotRightClick」をバインドしようとしましたが、それも機能しません。 「jqplotClick」を使用すると、すべてが期待どおりに機能します。

私がここで間違っていることを誰かが知っていますか？

アップデート2：

RE：「jqplotRightClick」をバインドしようとしましたが、それも機能しません。（上記を参照）

このイベントをキャッチするには、次のように設定する必要があることがわかりました。

captureRightClick: true,

参照：右クリックイベントをキャプチャする方法

4

1 に答える 1

1

「カーソル」プラグインから、次のように処理します。

if (c.dblClickReset) {
  $.jqplot.eventListenerHooks.push(['jqplotDblClick', handleDblClick]);
}

編集

'jqplotDblClick'をバインドするだけで、ダブルクリックをキャプチャできます。イベントをプッシュする必要はありませんでした。方向を間違えて申し訳ありませんが、上記の私の答えは、イベントがすでに存在していたことを示すことを意味していました。ここで作業フィドルを参照してください。私が追加した唯一の追加事項は、ダブルクリックするとdivが選択されるため、divを選択不可にするCSSルールでした。

HTML：

<div id="chart1" style="margin-top:20px; margin-left:20px; width:300px; height:300px; -moz-user-select: -moz-none;-khtml-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;"></div>​

JS：

$(document).ready(function(){
        $.jqplot.config.enablePlugins = true;
        var s1 = [2, 6, 7, 10];
        var ticks = ['a', 'b', 'c', 'd'];

        plot1 = $.jqplot('chart1', [s1], {

            seriesDefaults:{
                renderer:$.jqplot.BarRenderer
            },
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: ticks
                }
            }
        });

        $('#chart1').bind('jqplotDblClick', 
            function (ev, seriesIndex, pointIndex, data) {
                alert('hi');
            });
});
于 2012-05-18T15:27:48.953 に答える