1

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

我们需要标注的主要原因是因为我们需要为每个馅饼块贴上标签，而不管它的大小。标注可以让我们拥有更小的饼图，并减少文本与标签重叠的可能性。

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

提前致谢。

4

2 回答 2

4

我添加了一些类似于测试 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-21T05:26:40.930 回答
1

您可以使用plothover事件来显示标注。标注的标签可以在您喜欢的任何位置。这在Flot Page的最后一个示例中显示。谷歌电子表格使用了一种类似于链接的解决方案，并且效果很好。

于 2011-07-21T04:29:13.910 回答