Как отображать всплывающие подсказки на круговой диаграмме jqplot

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

пример кода:

$(document).ready(function(){
  var data = [['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14],['Out of home', 16],['Commuting', 7], ['Orientation', 9]];
  var plot1 = jQuery.jqplot ('chart1', [data],
    {
      seriesDefaults: {
        renderer: jQuery.jqplot.PieRenderer,
        rendererOptions: {
          showDataLabels: true
        }
      },
      legend: { show:true, location: 'e' }
    }
  );
});

javascript jquery charts tooltip jqplot
person emt14    schedule 21.11.2011    source источник

Ответы (5)


arrow_upward
12
arrow_downward

Вам нужно привязать выделенные и невыделенные события данных jqplot, захватить данные, которые вы хотите показать, и установить диаграмму, содержащую атрибут заголовка div.

Следующий код показывает заголовок в формате «x: y», где x - это метка легенды, а y - значение:

 var plot = $.jqplot('plotDivId',...);

 $("#plotDivId").bind('jqplotDataHighlight', function(ev, seriesIndex, pointIndex, data) {
            var $this = $(this);                

            $this.attr('title', data[0] + ": " + data[1]);                               
        }); 

 $("#plotDivId").bind('jqplotDataUnhighlight', function(ev, seriesIndex, pointIndex, data) {
            var $this = $(this);                

            $this.attr('title',""); 
 });

Этот фрагмент кода используется в моей системе, и он работает без проблем.

person Koby Mizrahy    schedule 02.05.2012
comment
Спасибо, Коби. С уважением, Аниш - person Anish Nair; 25.10.2012
comment
Не работает при переходе с помощью мыши от одного участка пирога к другому, не выходя из него. - person coorasse; 21.02.2013
comment
@coorasse Возможно, ваша проблема связана с вашим браузером, поскольку моя проблема специфична для Firefox. См. Мой вопрос на странице stackoverflow.com/q/21918656/449347 - person k1eran; 21.02.2014
comment
можно ли использовать то же самое для гистограммы с накоплением? - person ViVekH; 09.02.2015
comment
@Koby Mizrahy Как всегда отображать всплывающие подсказки или метки на круговых диаграммах в jqplot? Есть идеи по этому поводу? - person Mihir; 12.08.2015

arrow_upward
16
arrow_downward

Я использую последнюю версию jqPlot, и всплывающие подсказки работают, просто используя следующий раздел внутри "seriesDefaults":

highlighter: {
  show: true,
  formatString:'%s', 
  tooltipLocation:'sw', 
  useAxesFormatters:false
}

Важной частью является «useAxesFormatters: false», поскольку на круговой диаграмме нет осей. Не стесняйтесь изменять "formatString" на то, что вы хотите, но для меня просто "% s" показывает ту же самую строку, которая появляется в легендах.

person Srinidhi    schedule 04.01.2012
comment
проголосовал за ваш пост. ваше решение работает, но в нем отсутствовал параметр показа, вам также может потребоваться указать, что плагин подсветки должен быть загружен / включен - person Mayowa; 03.08.2012

arrow_upward
7
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

arrow_upward
0
arrow_downward

Я не верю, что для этого есть встроенный. Вам нужно будет привязать обработчики к событиям jqplotDataHighlight и jqplotDataUnhighlight. См. Пример внизу этой страницы. Это делается с пузырьковыми диаграммами, но это также должно переводиться на круговые диаграммы.

person Mark    schedule 21.11.2011

arrow_upward
0
arrow_downward

Поскольку я не мог заставить работать Highlighter - он ничего не отображал для меня на круговой диаграмме - я пришел к решению для отображения всплывающей подсказки браузера на основе события подсветки.

var plot1 = jQuery.jqplot ('chart1', [data], {
seriesDefaults: {
    renderer: jQuery.jqplot.PieRenderer
    }
}
);

$('#chart1').bind('jqplotDataHighlight', function (ev, seriesIndex, pointIndex, data) { 
    document.getElementById('chart1').title = data;
    //alert('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
    });
person Anders Jorsal    schedule 07.11.2014