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 Page的最后一个示例中显示。 Google Spreadsheets使用类似于链接的解决方案，效果非常好。

jQuery Flot饼图 - 标签的标注？

2 个答案: