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

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

12 голосов
/ 21 ноября 2011

У меня есть круговая диаграмма 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' }
    }
  );
});

Ответы [ 5 ]

16 голосов
/ 05 января 2012

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

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

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

12 голосов
/ 02 мая 2012

Вам необходимо связать события подсветки и невыделения данных 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',""); 
 });

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

7 голосов
/ 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',
}

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

0 голосов
/ 07 ноября 2014

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

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);
    });
0 голосов
/ 22 ноября 2011

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

...