jQuery Flot 饼图 - 标签标注？答案

【问题标题】：jQuery Flot Pie Chart - callouts for labels?jQuery Flot 饼图 - 标签标注？
【发布时间】：2011-07-15 16:26:00
【问题描述】：

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

我们需要标注的主要原因是因为我们需要为每个馅饼块添加标签，无论其大小。标注可以让我们拥有更小的饼图，并减少文本与标签重叠的可能性。

我已提议使用图例，但业务无法接受。我知道其他图表解决方案允许标注标注，但如果可能，我想继续使用 flot。

提前致谢。

【问题讨论】：

标签： jquery flot pie-chart

【解决方案1】：

我添加了一些类似于测试 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);
    }
 });

如果这有帮助，请告诉我！

【讨论】：

不完全是我的想法，但它比我想出的其他替代方案要好得多。谢谢。
是的，这绝对有帮助。我们会看看当权者怎么说，但我认为这是迄今为止我见过的最好的解决方案。我花了一分钟才意识到“绘图”变量是 $.plot(...) 的返回值。一旦我明白了，剩下的就是小菜一碟了。

【解决方案2】：

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

【讨论】：

谢谢 - 这是我目前正在做的，不幸的是它还不够