Question

我遇到了JQuery Flot的一个奇怪问题。

我一直在跑

var plot = null;

function initPlot () {
    plot = $.plot("#graph", myData, { /* my options here */ });
}

一切正常。

我将选项数据移动到函数范围内的变量

var plot = null;

function initPlot () {
    var myOptions = { /* my options here */ };
    plot = $.plot("#graph", myData, myOptions);
}

再一次，一切正常。

然后我将变量移动到更宽的范围（所以我可以在其他函数中引用它）。

var plot = null;
var myOptions = { /* my options here */ };

function initPlot () {
    plot = $.plot("#graph", myData, myOptions);
}

突然间它无法正确绘制。对我来说更令人困惑的是，它获得了大多数选项的价值 - 图表出现，而不是数据。

使用Chrome的调试器，我可以看到myOptions在调用$.plot()时具有正确的值。我还尝试设置局部变量o = myOptions并使用$.plot()而不是o调用myOptions，但这也无法绘制数据。

造成这种情况的原因是什么？如何解决？

我应该注意到我正在使用Flot.Grow和Flot.Stack，但是禁用它们不会改变结果。

编辑（再次）

根据评论，这里的字面意思是我的代码状态：

<body>
    <div id="graph" style="width: 100%; height: 800px;"></div>
    <script>
        var idMap = {};
        var yesData = [];
        var noData = [];
        var incData = [];
        var voteData = [{ label: "Yes votes", data: yesData },
                        { label: "No votes", data: noData },
                        { label: "Not met quorum", data: incData }];
        var ticks = [];
        var plot = null;

        var myOptions = {
            series: {
                //stack: true,
                lines: {
                    show: false,
                    fill: true,
                    steps: false,
                },
                bars: {
                    show: true,
                    barWidth: .8,
                    horizontal: true,
                },
                //grow: {
                //    active: false,
                //    steps: 20,
                //    stepDirection: "up",
                //    stepMode: "linear",
                //    valueIndex: 0,
                //    growings: [{
                //        valueIndex: 0,
                //    }]
                //},
            },
            yaxis: {
                min: -.2,
                max: 10, //dictLen(idMap),
                //ticks: ,
                //tickLength: 0,
            },
            xaxis: {
                min: 0,
                max: 200,
            },
            grid: {
                hoverable: true,
            },
        };

        function dictLen(obj) {
            var size = 0, key;
            for (key in obj) {
                if (obj.hasOwnProperty(key)) size++;
            }
            return size;
        };

        function setDataPoint(val) {
            var total = val.r["yes"] + val.r["no"];
            if (total < val.q) {
                incData.push([total, idMap[val.id]]);
            }
            else {
                yesData.push([val.r["yes"], idMap[val.id]]);
                noData.push([val.r["no"], idMap[val.id]]);
            }
        }

        function initData() {
            $.getJSON('/Vote/results', function (data) {
                $.each(data, function (key, val) {
                    idMap[val.id] = key;
                    ticks.push([key + .4, val.nm]);
                    setDataPoint(val);
                });

                initPlot();
            });
        }

        function initPlot() {
            plot = $.plot("#graph", voteData, myOptions);
        }

        $(document).ready(function () {
            initData();
        });
    </script>
</body>

Answer 1

原来我是个白痴。

问题是我在填充myOptions.yaxis.max之前计算idMap。然后，当我在这里等待答案时，我在数据库端进行了一些重构，这导致了一个空的数据集。

当我修复数据库并将myOptions设置为仅静态值时，它工作正常。

Javascript硬编码对象作为参数，但不是对全局对象的引用

1 个答案: