jQuery，Flot，值标签，中心 [英] JQuery, Flot, valuelabels, center

问题描述

是否可以将值标签放置在条形图上以便它们居中居中?

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

如果我将条形图设置为align: "center"，则条形图上的标签处于关闭状态且未居中.

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

批量价值标签插件

JSFIDDLE

推荐答案

插件让您失望了吗?自己动手，生活就这么简单.这是flot的优势，紧凑的代码使您不费吹灰之力...

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);
}

小提琴演示是此处.

产生:

这篇关于jQuery，Flot，值标签，中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！