jquery - float 条形图数据标签左偏移

Question

我正在将数据从 xml 对象读取到数组中，总共六项。图表渲染良好，每个垂直条的所有颜色和高度都可以。当我尝试向每个垂直条添加数据标签时，标签都出现在距相关条顶部的正确高度处，但它们都与左轴对齐。

下面代码中 o.left 的 left 属性始终返回 NaN 值。

$.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

是的，你的假设是正确的。如果您检查 plot.getData()[0].data:

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

因此，el[0] 最终成为“Team 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 .