Javascript 如何在条形图（flotchart）中插入值

我在显示条形图中的某些值时遇到一些问题。我想要一张这样的图表：。我不知道我在这里错过了什么

$('#myModalChart').on('shown.bs.modal', function (e) {
    var data = [{
        label: "Foo",
        data: [
            [2],
            [3, 9, 12],
            [6, 0, 3],
            [9, 11, 12],
            [12, 0, 1],
            [15, 0, 2],
            [18],
            [3, 12, 12],
            [9, 12, 12]
        ]
    },
    {
        label: "Bar",
        data: [
            [2],
            [3, 0, 5],
            [6, 3, 7],
            [9, 4, 11],
            [12, 1, 3],
            [15, 2, 5],
            [18]
        ]
    },
    {
        label: "Tree",
        data: [
            [2],
            [3, 5, 9],
            [6, 7, 15],
            [9, 0, 4],
            [12, 3, 13],
            [15, 5, 17],
            [15, 17, 17],
            [12, 13, 13],
            [6, 15, 15],
            [18]
        ]
    },];

    var options = {
        series: {
            bars: {
                show: true,
                barWidth: 1
            }
        },
        xaxis: {
            align: "center",
            ticks: [
                [3.5, 'text1'],
                [6.5, 'text2'],
                [9.5, 'text3'],
                [12.5, 'text4'],
                [15.5, 'text5']
            ]
        }
    };

    var plot = $.plot("#chart2", data, options)
});

---

我想要一张这样的图表，里面有标签。我希望他们都有

我错过了什么

---

您必须自己创建并放置数据值标签。如何做到这一点可以在中看到

我创建了一个调整它以适应您的代码。目前只有第一个数据系列（

foo

）有标签。你必须调整位置。有关守则：

$.each(plot.getData()[0].data, function (i, el) {
    if (el.length > 1) {
        var o = plot.pointOffset({
            x: el[0],
            y: el[1]
        });
        $('<div class="data-point-label">' + el[1] + '</div>').css({
            position: 'absolute',
            left: o.left + 4,
            top: o.top,
            'text-align': 'center',
            display: 'none'
        }).appendTo(plot.getPlaceholder()).fadeIn('slow');
    }
});

$.each（plot.getData（）[0]。数据，函数（i，el）{
如果（标高长度>1）{
var o=plot.pointOffset({
x:el[0]，
y:el[1]
});
$（''+el[1]+''）.css({
位置：'绝对'，
左：o左+4，
top:o.top，
“文本对齐”：“居中”，
显示：“无”
}).appendTo（plot.getPlaceholder（））.fadeIn（'slow'）；
}
});

---

但您可能还必须清理数据。您有多个具有相同x值的数据点（这意味着彼此后面/前面的条带导致某些数据点不可见）。请查看上的并排和堆栈插件。

请解释哪些插件不起作用，并修复不起作用的链接。还有，检查一下这个。我觉得你的代码很好。非常感谢。我想要一张这样的图表，里面有标签。我希望他们都有。我错过了什么？你的建议对我很有效。但我还有另一个问题。你说的X值是，如果我没有像[8,15,15]那样放进去的话，图表似乎是我用斧头砍下来的，我可以欺骗图表让它看起来更好（在我看来）。我用for（）填充了所有数据。但现在我有另一个问题。如何将Verticali标签居中？因为标签放在标签的顶部，我想保持居中。也许我必须用el[1]减去el[2]？使用

（e[1]+e[2]）/2

获得中心。但是，您还需要计算标签div的高度，并减去一半，以获得位于条中心的标签中心。