JQuery, Flot, valuelabels, center

问题:

Is it possible to place the value labels over the bars so they stand centered over them?

If i set bars align: "center", the labels over the bars is off and not centered.

<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

Flot Value Labels plugin

JSFIDDLE

回答1:

Plugins got you down? Just do it yourself, life it so much simpler then. This is the advantage of flot, compact code that get's out of your way...

Here's how I would add those labels:

// draw initial plot
// notice no categories plugin either, why?  
// Because it's 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);
}

Fiddle demonstration is here.

Produces:

回答2:

There seems to be no solution with the default Value Labels plugin. But there are some open issues which discuss this and here are some proposed solutions you can try.

This version of the plugin from neoDD69 does a better job at centering the labels as you can see in this fiddle (see comment below).