javascript-jQuery浮点数：数字定位

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

我的代码：

$.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度.我该如何实现？

解决方法:

糟糕,我是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

标签：javascript,jquery,charts,flot,bar-chart
来源： https://codeday.me/bug/20191009/1882156.html