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

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.

上的并行和堆栈插件

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

How to insert values in bars (flotcharts)

javascript

charts

flot