JQuery, Флот, valuelabels, центр

Можно ли поместить метки значений поверх стержней, чтобы они стояли по их центру?

Если я устанавливаю столбцы align: "center", метки над столбцами отключены и не центрируются.

<script type="text/javascript">

    $(function() {

        var data = [<?php echo $data; ?>];

        $.plot("#<?php echo $target; ?> .chart-placeholder", data, {
            series: {
                color: "rgb(57,137,209)",
                bars: {
                    show: true,
                    // align: "center",
                    barWidth: .8,
                    fill: 1     
                },
                valueLabels: {
                    show: true,
                    showAsHtml: true,
                    align: "center"
                }               
            },
            grid: {
                aboveData: true,
                hoverable: true,
                borderWidth: 0
            },
            xaxis: {
                mode: "categories",
                tickLength: 0,
                labelAngle: -45,
                showAsHtml: true
            },
            yaxis: {
                show: false,
                tickLength: 0
            },
        });
    });

    </script>

Flot

Плагин флаги значений ценности

JSFIDDLE

Ответ 1

Плагины подвели вас? Просто сделай это сам, жизнь так намного проще. Это преимущество flot, компактного кода, который убирается с вашего пути...

Вот как я бы добавил эти метки:

// draw initial plot
// notice no categories plugin either, why?  
// Because it easier to do it yourself...
var series = {data: [[0, 5.2], [1, 3], [2, 9.2], [3, 10]],
              lines: {show: false},
              bars: {show: true, barWidth: 0.75, align:'center'}}   
var somePlot = $.plot("#placeholder", [ series ], {
    xaxis: {
        ticks: [[0,"One"],[1,"Two"],
                [2,"Three"],[3,"Four"]]
    }
});

// after initial plot draw, then loop the data, add the labels
// I'm drawing these directly on the canvas, NO HTML DIVS!
// code is un-necessarily verbose for demonstration purposes
var ctx = somePlot.getCanvas().getContext("2d"); // get the context
var data = somePlot.getData()[0].data;  // get your series data
var xaxis = somePlot.getXAxes()[0]; // xAxis
var yaxis = somePlot.getYAxes()[0]; // yAxis
var offset = somePlot.getPlotOffset(); // plots offset
ctx.font = "16px 'Segoe UI'"; // set a pretty label font
ctx.fillStyle = "black";
for (var i = 0; i < data.length; i++){
    var text = data[i][1] + '';
    var metrics = ctx.measureText(text);
    var xPos = (xaxis.p2c(data[i][0])+offset.left) - metrics.width/2; // place it in the middle of the bar
    var yPos = yaxis.p2c(data[i][1]) + offset.top - 5; // place at top of bar, slightly up
    ctx.fillText(text, xPos, yPos);
}

Демонстрация скриптов здесь.

Выдает:

Ответ 2

Кажется, что нет решения с плагином Value Labels по умолчанию. Но есть некоторые открытые issues, которые обсуждают это, и здесь некоторые предлагаемые решения, которые вы можете попробовать.

Эта версия плагина от neoDD69 делает лучшую работу по центрированию ярлыков, как вы можете видеть в этой скрипке (см. комментарий ниже).