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

Question

我在条形图中显示一些值时遇到一些问题。我想要一个这样的图表：Example。我不知道我在这里缺少什么。

$('#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)
});

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

我缺少什么？

Answer 1

您必须自己创建并放置数据值标签。如何执行此操作可以在this answer中找到。

我创建了一个fiddle来调整代码。目前只有第一个数据系列（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');
    }
});

但您可能还需要清理数据。您有多个具有相同x值的数据点（这意味着在彼此之前/之后的条形，这导致一些不可见）。看一下flot plugin page上的并排和堆叠插件。