jQuery Flot饼图-标签的标注？

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

我们需要标注的主要原因是，我们需要为每个饼图块提供标签，而不管其大小。标注将允许我们使用更小的饼图，并减少文本与标签重叠的可能性

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

---

提前感谢。

您可以使用绘图悬停事件来显示标注。详图索引的标签可以在您喜欢的任何位置。最后一个示例中显示了这一点。Google Spreadsheets使用的解决方案与链接的解决方案类似，效果非常好。

您可以使用绘图悬停事件来显示标注。详图索引的标签可以在您喜欢的任何位置。最后一个示例中显示了这一点。GoogleSpreadsheets使用了一个类似于链接的解决方案，效果非常好。

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

函数显示工具提示（x、y、内容）{
$（''+内容+''）.css（{
位置：'绝对'，
顶部：y+5，
左：x+5，
边框：“1px实心#fdd”，
填充：“2px”，
“背景色”：“费用”，
不透明度：0.80
}).appendTo（“body”）；//.fadeIn（200）；
}
var-previousPoint=null；
$（“#占位符”）.bind（'mouseout'，function（）{
plot.unhighlight（）；
$（“#工具提示”）.remove（）；
$（此）.data（'previous-post'，-1）；
});
$（“#占位符”）.bind（'plothover'，函数（事件、位置、项目）{
如果（项目）{
if（$（this.data（'previous-post'）！=item.seriesIndex）{
plot.unhighlight（）；
突出显示（item.series、item.datapoint）；
$（此）.data（'previous-post'，item.seriesIndex）；
}
$（“#工具提示”）.remove（）；
y='在'+（新日期（item.datapoint[0]））.toDateString（）+'：'+item.datapoint[1]；
显示工具提示（pos.pageX、pos.pageY、item.series.label+“”+y）；
}否则{
plot.unhighlight（）；
$（“#工具提示”）.remove（）；
previousPost=$（this）.data（'previous-post'，-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);
    }
 });

函数显示工具提示（x、y、内容）{
$（''+内容+''）.css（{
位置：'绝对'，
顶部：y+5，
左：x+5，
边框：“1px实心#fdd”，
填充：“2px”，
“背景色”：“费用”，
不透明度：0.80
}).appendTo（“body”）；//.fadeIn（200）；
}
var-previousPoint=null；
$（“#占位符”）.bind（'mouseout'，function（）{
plot.unhighlight（）；
$（“#工具提示”）.remove（）；
$（此）.data（'previous-post'，-1）；
});
$（“#占位符”）.bind（'plothover'，函数（事件、位置、项目）{
如果（项目）{
if（$（this.data（'previous-post'）！=item.seriesIndex）{
plot.unhighlight（）；
突出显示（item.series、item.datapoint）；
$（此）.data（'previous-post'，item.seriesIndex）；
}
$（“#工具提示”）.remove（）；
y='在'+（新日期（item.datapoint[0]））.toDateString（）+'：'+item.datapoint[1]；
显示工具提示（pos.pageX、pos.pageY、item.series.label+“”+y）；
}否则{
plot.unhighlight（）；
$（“#工具提示”）.remove（）；
previousPost=$（this）.data（'previous-post'，-1）；
}
});

---

让我知道这是否有帮助

谢谢-这是我目前正在做的，不幸的是这是不够的谢谢-这是我目前正在做的，不幸的是这不是我想要的，但它比我想出的其他选择要好得多。是的，这确实有帮助。我们将看看这些力量会说些什么，但我认为这是迄今为止我见过的最好的解决方案。我花了一分钟才意识到“plot”变量是$.plot（…）的返回值。一旦我得到了它，剩下的就很容易了。这不完全是我想要的，但它比我想出的其他选择要好得多。是的，这确实有帮助。我们将看看这些力量会说些什么，但我认为这是迄今为止我见过的最好的解决方案。我花了一分钟才意识到“plot”变量是$.plot（…）的返回值。一旦我拿到了，剩下的都是小菜一碟。