Question

我正在尝试在我的Phonegap应用程序中使用flotr2图表。我可以在AVD上运行他们的示例图（http://www.humblesoftware.com/flotr2/documentation#usage），但如果我尝试在我的实际应用程序中使用它，它会给我错误Uncaught目标容器必须在文件中可见：///android_asset/www/flotr2.min.js：27我该如何解决这个问题？

与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尚未加载等）。无论如何，值得一去。

flotr2目标容器必须在

1 个答案:

编辑：