Question

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

enter image description here

以下代码中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
            }
        });

这可能与模式有关：＆＃34;类别＆＃34;上面的行作为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]最终成为“第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。

flot条形图数据标签左偏移

1 个答案: