條形圖上的jqplot工具提示

Question

我正在使用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軸將會變得雜亂無章。

Answer 1

我通過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];
}

Answer 2

沒關系，我做了一個迂回的方式來通過jquery創建我自己的工具提示。

我離開了我的熒光筆設置，因為它們在我的問題中（盡管你可能不需要工具提示的東西）。

在我的js文件中設置了條形圖之后（在$.jqplot('chart', ... ）我設置了鼠標懸停綁定，正如一些示例所示。我修改它像這樣：

 $('#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-highlighter-tooltip 。

希望這對別人有幫助！

Answer 3

我在以下鏈接上使用了熒光筆插件的版本：

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的大小。