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

Question

Я использую jQplot 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 
      } 

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

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

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

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

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

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

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

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