javascript - jQuery float 条形数字 : Numbers positioning

Question

我正在使用jquery.flot.barnumbers.js Javascript plotting (charts) library for jQuery 的插件在栏上显示数字。

我的代码:

$.plot("#placeholderByDay", [
            {
                data: DataOne, label: "Total Calls", bars: {
                    numbers:{
                        show:true,
                        xAlign: 80,//align top
                        yAlign: 1 
                        //yAlign: function(y) { return y+ 1; } //upside of bars
                    }
            } ]);

我现在得到的是:

我需要的是:

因此，当条形图没有数据时，零点应位于轴的正上方，而有值的地方应按原样旋转 90 度。我怎样才能实现这个目标？

Answer 1

哎呀，我did it again .

如果您想放弃该插件并以有趣的方式执行此操作；自己编码。它让您可以自由地以您喜欢的方式进行自定义。

// after you draw the plot
var ctx = somePlot.getCanvas().getContext("2d");
var data = somePlot.getData()[0].data;
var xaxis = somePlot.getXAxes()[0];
var yaxis = somePlot.getYAxes()[0];
var offset = somePlot.getPlotOffset();
ctx.font = "16px 'Segoe UI'";
ctx.fillStyle = "black";    
for (var i = 0; i < data.length; i++){       
    var text = data[i][4] + '';
    var metrics = ctx.measureText(text);
    var xPos = xaxis.p2c(data[i][0]) + offset.left;
    var yPos = yaxis.p2c(data[i][5]) + offset.top + metrics.width + 5;
    // perform the rotation
    ctx.save();
    ctx.translate(xPos, yPos);
    ctx.rotate(-Math.PI/2);
    ctx.fillText(text, 1, 1);
    ctx.restore();
}

示例 here .