2016-10-17 3 views
1

Когда я наводил курсор на пирог, он показывает мне имя и оценку, но только сверху. Я хочу, когда я нахожусь над правильным пирогом, он должен показать мне выделенные данные с правой стороны, и аналогичным образом для нижнего правого пирога выделенное имя и оценка должны появиться в нижней правой части.jqPlot - выделить данные круговой диаграммы

Вот мой jqPlot код для пирога

var a=2; 
var c=2; 
var t=2; 
var i=2; 

var plot4 = $.jqplot('pie3', [[['A',c],['B',t],['B',a],['D',i]]], { 
              seriesDefaults:{ 
              shadow: false, 
              renderer:$.jqplot.PieRenderer, 
              rendererOptions:{ 
           sliceMargin: 4, 
               // rotate the starting position of the pie around to 12 o'clock. 
           startAngle: -90, 
        showDataLabels: true, 
         dataLabels: 'value', 
         dataLabelFormatString:'%.1f' 

             } 
           } , 
              
       grid: {   
        background: 'transparent', 
        borderColor: 'transparent', 
        shadow: false, 
        drawGridLines: false, 
        gridLineColor: 'transparent', 
        borderWidth: '0' 
       } 
      }); 

     $('#pie3').bind('jqplotDataHighlight', 
     function (ev, seriesIndex, pointIndex, data, radius) {  

      var chart_left = $('#pie3').offset().left, 
      chart_top = $('#pie3').offset().top; 

      var color = '#337ab7'; 
      $('#tooltip1b').css({left:chart_left+radius+5, top:chart_top}); 
      $('#tooltip1b').html('<span style="font-size:15px;font-weight:bold;color:' + 
      color + ';">' + data[0] + '</span><br />' + 'Score : <span style="font-weight:bold;">' + parseFloat(Math.round(data[1] * 100)/100).toFixed(2) + "</span>"); 
      $('#tooltip1b').show(); 
     }); 

     // Bind a function to the unhighlight event to clean up after highlighting. 
     $('#pie3').bind('jqplotDataUnhighlight', 
      function (ev, seriesIndex, pointIndex, data) { 
       $('#tooltip1b').empty(); 
       $('#tooltip1b').hide();     
      }); 
}); 
+0

Было бы очень приятно, если бы вы могли поставить скрипку (вместо изображения), чтобы увидеть текущее поведение в действии. –

+0

@DavidR моя скрипка не генерирует диаграмму .. я не знаю, почему –

+0

Можете ли вы разместить ссылку на скрипку. Дай мне проверить. –

ответ

0

Ну, все что вам нужно сделать, это добавить атрибут highlighter в код, как,

highlighter: { 
    show: true, 
    useAxesFormatters: false, 
    tooltipFormatString: '%s' 
}, 

Вот рабочая скрипку: https://jsfiddle.net/g5ufg021/8/

Надеюсь, это поможет!