flotr2目标容器必须在可见

Question

我正在尝试让flotr2图在我的Phonegap应用程序中工作。我可以得到他们的示例图(http://www.humblesoftware.com/flotr2/documentation#usage)在AVD上运行，但如果我试图在实际应用程序中使用它，它会给我错误Uncaught目标容器必须在file:///android_asset/www/flotr2.min.js:27我该怎么解决这个问题？

与浮选机2相关的代码：

//Flotr2 style contained in head below other styles
<style type="text/css">
    body {
        margin: 0px;
        padding: 0px;
    }
    #container {
        width : 600px;
        height: 384px;
        margin: 8px auto;
    }
</style>
//Accidentally changing </style> to </script> causes the graph to display
//but everything else is wrong, as can be expected

和：

//Page meant to contain graph; in body
<!-- Graphs -->
    <div data-role="page" data-theme="a" id="page21">
        <div data-theme="a" data-role="header">
            <h3>
                Graphs
            </h3>
            <a data-role="button" data-direction="reverse" data-transition="slide" href="#page15" data-icon="arrow-l" data-iconpos="left" class="ui-btn-left">
                Back
            </a>
        </div>
        <div data-role="content" style="padding: 15px">
            <div id="container"></div>
                <script type="text/javascript" src="flotr2.min.js"></script>
                <script type="text/javascript">
                (function () {
                    var
                        container = document.getElementById('container'),
                        start = (new Date).getTime(),
                        data, graph, offset, i;
                    // Draw a sine curve at time t
                    function animate (t) {
                        data = [];
                        offset = 2 * Math.PI * (t - start) / 10000;
                        // Sample the sine function
                        for (i = 0; i < 4 * Math.PI; i += 0.2) {
                            data.push([i, Math.sin(i - offset)]);
                        }
                        // Draw Graph
                        graph = Flotr.draw(container, [ data ], {
                            yaxis : {
                                max : 2,
                                min : -2
                            }
                        });
                        // Animate
                        setTimeout(function () {
                            animate((new Date).getTime());
                        }, 50);
                    }
                    animate(start);
                })();
            </script>
        </div>
    </div>

Answer 1

通过读取flotr2的源代码，您可以看到在这种情况下，由于某些原因，没有定义el.clientWidth。flotr2似乎依赖于这一特性。如果没有看到任何其他代码，很难说为什么会发生这种情况。

编辑：

由于您使用的是PhoneGap，您可以尝试将代码设置为使用deviceready，看看这是否有帮助。可能是因为clientWidth还没有设置（CSS还没有加载等等），所以它丢失了。无论如何，值得一试。