web-dev-qa-db-ja.com

棒グラフのjqplotツールチップ

私はいくつかの棒グラフをプロットするために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軸が混乱しているだけで、そこだけに表示すると混乱します。

javascriptjquerygraphchartsjqplot
21
butterywombat

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];
}
31
duckegg

気にしないでください、私は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軸の目盛り文字列が含まれています。 jqplotのdataには、マウスの下の現在のデータが[x-category-＃、y-value]タイプの配列として含まれています。 pointIndexには現在強調表示されているバー番号があります。基本的に、これを使用してティック文字列を取得します。

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

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

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

22
butterywombat

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

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のサイズ変更の問題を回避するために、左上隅に配置することをお勧めします。

2
Wagner Dias