Всплывающая подсказка jqplot на гистограмме

Я использую jqplot jQuery для построения графиков. на hover, я хотел бы отобразить галочку для бара и его значение на всплывающей подсказке. Я пробовал

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
            }

но это не сработает. бар визуально становится светлее, а на вершине - небольшая точка (что идеально подойдет - возможно, из средств визуализации линейного графика), но в любом месте нет подсказки. Кто-нибудь знает, как я могу это сделать? У меня будет много баров, поэтому ось х будет захламлена и будет беспорядочной, если я покажу их там только.

Ответ 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];
}

Ответ 2

nevermind, я сделал окольный способ создать свою собственную подсказку через 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 x. jqplot data имеет текущие данные под вашей мышью в виде массива типа [x-category- #, y-value]. pointIndex имеет текущую выделенную строку #. В основном мы будем использовать это, чтобы получить строку галочки.

Затем я ввел всплывающую подсказку, чтобы она приблизилась к тому, где находится указатель мыши. Вероятно, вам придется немного вычесть из mouseX и mouseY, если этот div находится в других позиционируемых контейнерах.

вы можете создать стиль #chartpseudotooltip в своем css. Если вы хотите стили по умолчанию, вы можете просто добавить его в .jqplot-highlighter-tooltip в jqplot.css.

надеюсь, что это полезно для других!

Ответ 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.