jQuery Flot 饼图 - 标签标注？

Question

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

我们需要标注的主要原因是因为我们需要为每个饼图添加标签，无论其大小如何。标注将使我们能够获得更小的饼图，并减少文本与标签重叠的可能性。

我建议使用图例，但这对于企业来说是不可接受的。我确实知道其他图表解决方案允许标签标注，但如果可能的话希望继续使用 flot。

提前致谢。

Answer 1

我添加了类似的东西来测试绘图悬停。您需要根据您的特定场景调整解决方案，但这应该会有很大帮助。

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

让我知道这是否有帮助！

Answer 2

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