flotr2目标容器必须在

Question

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

Flotr2相关代码：

//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还没有加载等等)。不管怎样，值得一试。