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。