21

いくつかの棒グラフをプロットするためにjqueryプラグインjqplotを使用しています。ホバー時に、バーの目盛りとその値をツールチップに表示したいと思います。私はもう試した

highlighter: { show: true, 
            showTooltip: true,      // show a tooltip with data point values.
            tooltipLocation: 'nw',  // location of tooltip: n, ne, e, se, s, sw, w, nw.
            tooltipAxes: 'both',    // which axis values to display in the tooltip, x, y or both.
            lineWidthAdjust: 2.5   // pixels to add to the size line stroking the data point marker
            }

しかし、それは機能しません。バーは視覚的に明るくなり、上部に小さな点があります（理想的には消えます-おそらく折れ線グラフレンダラーのものから）が、どこにもツールチップはありません。誰かが私がこれを行う方法を知っていますか？たくさんのバーがあるので、そこだけに表示すると、x軸が乱雑になり、混乱します。

4

3 に答える 3

31

jqplot.highlighter.jsを調べて、文書化されていないプロパティを見つけました：tooltipContentEditor。これを使用して、ツールチップをカスタマイズしてx軸ラベルを表示します。

次のようなものを使用します。

highlighter:{
        show:true,
        tooltipContentEditor:tooltipContentEditor
    },

function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
    // display series_label, x-axis_tick, y-axis value
    return plot.series[seriesIndex]["label"] + ", " + plot.data[seriesIndex][pointIndex];
}
于 2012-07-26T15:36:39.110 に答える
22

気にしないでください、私はjqueryを介して独自のツールチップを作成するための回り道をしました。

蛍光ペンの設定は、質問のとおりのままにしました（ただし、ツールチップの設定はおそらく必要ありません）。

いくつかの例が示すように、棒グラフが設定された後（後$.jqplot('chart', ...）のjsファイルで、マウスホバーバインディングを設定しました。私はそれを次のように変更しました：

 $('#mychartdiv').bind('jqplotDataHighlight', 
        function (ev, seriesIndex, pointIndex, data ) {
            var mouseX = ev.pageX; //these are going to be how jquery knows where to put the div that will be our tooltip
            var mouseY = ev.pageY;
            $('#chartpseudotooltip').html(ticks_array[pointIndex] + ', ' + data[1]);
            var cssObj = {
                  'position' : 'absolute',
                  'font-weight' : 'bold',
                  'left' : mouseX + 'px', //usually needs more offset here
                  'top' : mouseY + 'px'
                };
            $('#chartpseudotooltip').css(cssObj);
            }
    );    

    $('#chartv').bind('jqplotDataUnhighlight', 
        function (ev) {
            $('#chartpseudotooltip').html('');
        }
    );

説明： ticks_array以前に定義されており、x軸の目盛り文字列が含まれています。jqplotdataは、マウスの下にある現在のデータを[x-category-＃、y-value]型の配列として保持します。pointIndex現在強調表示されているバー番号があります。基本的に、これを使用してティック文字列を取得します。

次に、マウスカーソルの位置の近くに表示されるようにツールチップのスタイルを設定しました。mouseXこのdivが他の配置されたコンテナにある場合は、おそらくからmouseY少し引く必要があります。

#chartpseudotooltipその後、CSSでスタイルを設定できます。デフォルトのスタイルが必要な場合.jqplot-highlighter-tooltipは、jqplot.cssに追加するだけです。

これが他の人に役立つことを願っています！

于 2011-02-03T23:14:29.783 に答える
2

次のリンクにあるバージョンの蛍光ペンプラグインを使用しています。

https://github.com/tryolabs/jqplot-highlighter

私が使用しているパラメータ：

highlighter: {
    show:true,
    tooltipLocation: 'n',
    tooltipAxes: 'pieref', // exclusive to this version
    tooltipAxisX: 20, // exclusive to this version
    tooltipAxisY: 20, // exclusive to this version
    useAxesFormatters: false,
    formatString:'%s, %P',
}

新しいパラメータにより、ツールチップが表示される固定位置が保証されます。コンテナdivのサイズ変更の問題を回避するために、左上隅に配置することをお勧めします。

于 2012-10-05T12:17:24.557 に答える