jQuery flot bar數字：數字定位

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

糟糕，I diditagain。

如果你想放下插件，並以這種有趣的方式做到這一點;自己編碼。它會給你自由定製任何你喜歡的方式。

// 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。

Answer 2

part of the plot

我在y軸使用「類別」，文本的y位置應該是這樣的：

for(var i=0;i<data1.length;i++){ 
     ..... 
     var yPos = yaxis.p2c(i) + fontSize; 
     ..... 
    } 

，如果你想在海軍報顯示這樣的： y位置的文字應該是這樣的：

for(var i=0;i<data1.length;i++){ 
     ..... 
     var yPos = yaxis.p2c(i+align) + fontSize; 
     ..... 
} 

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