Подсказка jqplot на гистограмме - PullRequest
Новая
       44

Подсказка jqplot на гистограмме

21 голосов
/ 03 февраля 2011

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

Ответы [ 3 ]

30 голосов
/ 26 июля 2012

Я перехожу через 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];
}
22 голосов
/ 04 февраля 2011

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

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

2 голосов
/ 05 октября 2012

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

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',
}

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

...