1

我试图让 flotr2 图表在我的 Phonegap 应用程序中工作。我可以让他们的示例图（http://www.humblesoftware.com/flotr2/documentation#usage）在 AVD 上运行，但是如果我尝试在我的实际应用程序中使用它，它会给我错误 Uncaught The target container must在 file:///android_asset/www/flotr2.min.js:27 上可见 我将如何解决这个问题？

与 fltr2 相关的代码：

//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>
4

1 回答 1

1

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

编辑：

由于您使用的是 PhoneGap，因此您可以尝试装配代码以使用deviceready并查看是否有帮助。由于尚未设置（尚未加载 CSS 等），可能缺少 clientWidth。总之，值得一试。

于 2012-07-27T16:47:01.993 回答