JQuery,Flot,valuelabels,center

是否有可能将价值标签放在酒吧上,以便他们站在他们的身边？

如果我设置酒吧对齐：“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

Flot Value Labels plugin

JSFIDDLE

解决方法

插件让你失望了只要自己做,生活就这么简单了.这是flot的优势,紧凑的代码,让你的方式…

以下是我添加这些标签的方法：

// 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"],"Two"],"Three"],"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);
}

小提琴演示是here.

生产：

原文地址：https://www.jb51.cc/jquery/179338.html