flot條形圖數據標籤左偏移

Question

我正在從一個xml對象讀取數據到一個數組中，共計六個項目。圖表呈現良好，每個垂直條的所有顏色和高度都可以。當我嘗試向每個垂直條添加數據標籤時，標籤全部出現在相關條頂部的正確高度處，但它們都與左側軸對齊。

o.left的下面始終返回NaN值的代碼的left屬性。

$.each(plot.getData()[0].data, function(i, el){ 

      var o = plot.pointOffset({x: el[0], y: el[1]}); 

      $('<div class="data-point-label">' + el[1] + '</div>').css({ 
       position: 'absolute', 
      --->left: o.left + 4,<-- 
       top: o.top - 20, 
       display: 'none', 
       color:'#000', 
       fontSize:'12pt' 
      }).appendTo(plot.getPlaceholder()).slideToggle(); 
     }); 

我不知道如果我從XML到陣列中添加數據的方法是在劇情的選項不正確或東西，如下：

$(function() { 

     Init() //Load XML and load into array named data 

     plot = $.plot("#placeholder", [ data ], { 
     grid: { 
       backgroundColor: { colors: [ "#FFF", "#FFF" ] }, 
       borderWidth: { 
        top: 0, 
        right: 0, 
        bottom: 0, 
        left: 0 

       } 
      }, 
      series: { 
       bars: { 
        show: true, 
        lineWidth: 0, // in pixels 
        barWidth: 0.9, // in units of the x axis 
        fill: true, 
        fillColor: "#0000FF", 
        align: "center", // "left", "right", or "center" 
        horizontal: false, 
        zero: true, 
       } 
      }, 
      xaxis: { 
       mode: "categories", 
       tickLength: 0, 
       autoscaleMargin: 0.1 
      } 
     }); 

這是可能的東西使用模式：「類別」行上面的x軸包含文本值？任何指針？

Answer 1

是的，你的假設是正確的。如果您inpect plot.getData()[0].data：

>plot.getData()[0].data 
    [ 
    Array[2] 
     0: "Team 1" 
     1: 3 
     length: 2 
     __proto__: Array[0] 
    , 
    ... 

所以，el[0]最終結果爲「1隊」，這當然是不會有pointOffset期待一些工作。

的easiest fix to your problem是使用：

var o = plot.pointOffset({x: i, y: el[1]}); // using i instead of el[0] 

這工作，因爲這是類插件做什麼「引擎蓋下」，它取代文本字符串[0,1,2,3] ...

雖然我會修復它的方式，但要停止使用類別插件的。它只會導致更多的問題，那麼它是值得的。使用ticks選項，然後使用existing code works fine。