Question

当我将鼠标悬停在馅饼上时，它会显示名称和分数，但仅限于左上角。我想要的是当我将鼠标悬停在右侧饼图上时，它应该向我显示右侧的突出显示数据，同样对于右下角饼图，突出显示的名称和分数应显示在右下方。

这是我的馅饼

的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();                 
          });
 });

Answer 1

嗯，您需要做的就是将highlighter属性添加到代码中，

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

这是工作小提琴：https://jsfiddle.net/g5ufg021/8/

希望这有帮助！

jqPlot - 饼图数据突出显示

1 个答案: