jQuery flot bar数字：数字定位

我正在使用jQuery绘制（图表）库的 jquery.flot.barnumbers.js插件来显示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

哎呀，我又 做 了 。

如果您想删除插件并以有趣的方式执行此操作; 自己编码。 它可以让您自由地按照自己喜欢的方式进行自定义。

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

这里的例子。

Answer 2

情节的一部分

我在yaxis中使用“类别”，文本的y位置应该是这样的：

 for(var i=0;i 

如果你想要这样的flot节目： 文本的y位置应该是这样的：

 for(var i=0;i 

align = barWidth / 2，如果bars'align ='left'; align = -barWidth / 2，如果bars'align ='right;