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

Источник

3 ответа

Решение

Я иду через 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];
}
Источник

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

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

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

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

Источник

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

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.

Источник
Другие вопросы по тегам