JQuery, Flot, Wertelabels, Mitte

Question

Ist es möglich, die Wertelabels über den Balken zu platzieren, so dass sie zentriert über ihnen stehen?

Wenn ich die Balken align: "center" einstelle, sind die Beschriftungen über den Balken aus und nicht zentriert.

<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

Answer 1

Plugins hast du runter? Mach es einfach selbst, lebe es so viel einfacher als damals. Dies ist der Vorteil von flot, kompakten Code, der aus dem Weg bekommen ...

Hier ist, wie ich diese Etiketten hinzufügen würde:

// 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 ist here.

Produziert:

Answer 2

Es scheint mit dem Standardwert Labels Plugin keine Lösung. Aber es gibt einige offene issues, die dies diskutieren und here sind einige vorgeschlagene Lösungen, die Sie ausprobieren können.

This version des Plugins von neoDD69 macht eine bessere Arbeit bei der Zentrierung der Etiketten, wie Sie in dieser Geige sehen können (siehe Kommentar unten).