关于 FLOT CHARTS API 错误：无法读取未定义的属性“长度”答案

【问题标题】：regarding FLOT CHARTS API Error :Cannot read property 'length' of undefined关于 FLOT CHARTS API 错误：无法读取未定义的属性“长度”
【发布时间】：2014-04-01 07:17:45
【问题描述】：

您好，这是我的 FLOT 图表 API 代码。我得到了图表，但我得到了上述错误。这是我的代码：

JavaScript：

$(function () {
    var a1 = [
        [0, 1],
        [1, 2],
        [2, 6],
        [3, 9],
        [4, 5]
    ];
    var a2 = [
        [0, 4],
        [1, 5],
        [2, 1],
        [3, 7],
        [4, 7]
    ];
    var data = [{
        label: "Pre Transformation",
        data: a1
    }, {
        label: "Post Transformation",
        data: a2
    }];

    $.plot($("#consolidate1"), data, {
        series: {
            bars: {
                show: true,
                barWidth: 0.13,
                order: 1,
                align: "center"
            }
        },
        xaxis: {
            ticks: [
                [0, "Overall"],
                [1, "SEA"],
                [2, "INDIA"],
                [3, "NEA"],
                [4, "PZ"]
            ],
            tickLength: 0
        },
        grid: {
            hoverable: true,
            clickable: true,
            labelMargin: 15
        },

        valueLabels: {
            show: false
        }
    });
});


var previousPoint = null,
    previousLabel = null;

function showTooltip(x, y, color, contents) {
    $('<div id="tooltip">' + contents + '</div>').css({
        position: 'absolute',
        display: 'none',
        top: y - 40,
        left: x - 120,
        border: '2px solid ' + color,
        padding: '3px',
            'font-size': '9px',
            'border-radius': '5px',
            'background-color': '#fff',
            'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
        opacity: 0.9
    }).appendTo("body").fadeIn(200);
}

$("#consolidate1").on("plothover", function (event, pos, item) {
    if (item) {
        if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
            previousPoint = item.dataIndex;
            previousLabel = item.series.label;
            $("#tooltip").remove();

            var x = item.dataIndex;
            var y = item.datapoint[1];
            var color = item.series.color;

            //console.log(item.series.xaxis.ticks[x].label);               

            showTooltip(item.pageX,
            item.pageY,
            color,
                "<strong>" + item.series.label + "</strong><br>" + item.series.xaxis.ticks[x].label + ":  <strong>" + y + "</strong>");
        }
    } else {
        $("#tooltip").remove();
        previousPoint = null;
    }
});

HTML 代码：

<div>
    <p>Yearly Energy Consumption</p>
    <div id="consolidate1" style="width:500px;height:300px;"></div>
</div>

Fiddle 中的代码。

我无法弄清楚为什么会出现此错误。

【问题讨论】：

添加了小提琴，但无法重现小提琴中的错误。
在我自己的计算机上为您独立运行它。不过，我也无法重现该错误。
顺便说一句：考虑使用堆栈插件（有关示例，请参阅此更新的fiddle）
但我又遇到了错误。错误是从 JS 部分抛出的。它是 jquery.flot.js 中的第 2907 行。确切的工作在你 Raidri 分享的小提琴中。请告诉我这个模块要包含的所有js。
对于堆栈插件，您只需要普通的jquery.flot.js 和http://www.flotcharts.org/flot/jquery.flot.stack.js。然后在选项中的series 下添加stack: true。

标签： javascript flot bar-chart

【解决方案1】：

我得到了类似的错误......在调试时我发现错误指向“~/float.js” .... 然后我检查了我的代码，我试图绘制另一个图表，对于该图表，我注释掉了图表的 Html 部分.. 所以我得到了上述错误。

我修复的方法是：注释掉 $.plot() 其他图表。

希望这可能对某人有所帮助！

【讨论】：