всплывающая подсказка 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 будет загромождена и будет беспорядком, если я покажу их только там.


javascript jquery charts graph jqplot
person butterywombat    schedule 03.02.2011    source источник

Ответы (3)


arrow_upward
31
arrow_downward

Я просматриваю 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];
}
person duckegg    schedule 26.07.2012
comment
Верный. Это то, что я искал. Спасибо! - person Tomasz Rozmus; 23.08.2012
comment
отличное решение для собственности / обратного вызова. Это мне очень поможет. - person brunobord; 18.09.2012

arrow_upward
22
arrow_downward

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

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

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

надеюсь, что это поможет другим!

person butterywombat    schedule 03.02.2011
comment
Вы должны полностью поделиться этим здесь, чтобы помочь кому-либо еще с той же проблемой. - person jcolebrand; 04.02.2011
comment
@butterywombat: У меня та же проблема, что и у вас, и я пытаюсь объединить ваш код со своим, и я не заметил никаких изменений во всплывающей подсказке. Я действительно новичок в jquery, хотел бы попросить совета. особенно на #mychartdiv и #chartv, нужно ли мне определять эти два? Большое спасибо. :) - person Ianthe; 16.11.2011
comment
о нет, я не получил это сообщение ... ну, ответы через год Я думаю, что не менял '#chartv' на '#mychartdiv', когда вставлял свой код для переполнения стека. Так что я почти уверен, что #chartv должен сказать #mychartdiv. Вы бы поместили их в html-файл, где хотите, чтобы график отображался. - person butterywombat; 16.01.2012

arrow_upward
2
arrow_downward

Я использую версию плагина подсветки по следующей ссылке:

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.

person Wagner Dias    schedule 05.10.2012