jQuery Flot饼图 - 标签的标注？

我一直在使用flot来满足我的jquery制图需求。现在，我需要添加一个饼图（我知道flot很好）。对于饼图，我们需要的一件事情是，我没有看到flot的标注是标注每个饼图块上的值（标注是带有将标签连接到饼图块的线的标签）。有谁知道如何让标注在flot中的饼片上工作？jQuery Flot饼图 - 标签的标注？

我们需要标注的主要原因是因为我们需要为每个饼块标注不论其大小。标注可让我们制作更小的馅饼片，并减少文字与标签重叠的可能性。

我建议使用图例，但这是业务所不能接受的。我知道其他制图解决方案允许标注标注，但是如果可能的话，我想继续使用flot。

在此先感谢。

来源

2011-07-15 Ed Sinek

我添加了一个类似测试plothover。您需要根据您的具体情况调整解决方案，但这应该是一个很大的帮助。

function showTooltip(x, y, contents) { 
    $('<div id="tooltip">' + contents + '</div>').css({ 
     position: 'absolute', 
     top: y + 5, 
     left: x + 5, 
     border: '1px solid #fdd', 
     padding: '2px', 
     'background-color': '#fee', 
     opacity: 0.80 
    }).appendTo("body");//.fadeIn(200); 
} 

var previousPoint = null; 

$('#placeholder').bind('mouseout', function() { 
    plot.unhighlight(); 
    $("#tooltip").remove(); 
    $(this).data('previous-post', -1); 
}); 

$('#placeholder').bind('plothover', function(event, pos, item) { 
    if (item) { 
     if ($(this).data('previous-post') != item.seriesIndex) { 
      plot.unhighlight(); 
      plot.highlight(item.series, item.datapoint); 
      $(this).data('previous-post', item.seriesIndex); 
     } 
     $("#tooltip").remove(); 
     y = 'on ' + (new Date(item.datapoint[0])).toDateString() + ': ' + item.datapoint[1]; 
     showTooltip(pos.pageX, pos.pageY, item.series.label + " " + y); 
    } else { 
     plot.unhighlight(); 
     $("#tooltip").remove(); 
     previousPost = $(this).data('previous-post', -1); 
    } 
});

让我知道这是否有帮助！

来源

2011-07-21 05:26:40 ghayes

不完全是我想到的，但它比我想出的其他替代品好很多。谢谢。 –

是的，这肯定有帮助。我们将看看这些能力说的是什么，但我认为这是迄今为止我所见过的最好的解决方案。花了我一分钟才知道“plot”变量是$ .plot（...）的返回值。一旦我得到了，剩下的就是一块蛋糕。 –

您可以使用plothover事件来显示标注。标注的标签可以在任何你喜欢的地方。这在Flot Page的最后一个例子中显示。 Google Spreadsheets使用与链接相似的解决方案，效果非常好。

来源

2011-07-21 04:29:13

谢谢 - 这就是我目前正在做的，不幸的是它不足 –

jQuery Flot饼图 - 标签的标注？

回答

相关问题