javascript - 如何让 float 图表在 Rails 中工作？

Question

所以我试图让 flot 渲染图表，但我似乎无法让它工作。这是我现在拥有的:

<div class="col-md-6" style="width:600px;height:300px">
          <script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.1/jquery.flot.min.js"></script>
          <div id="flot-graph"></div>
            <script>
                $(function() {
                    var myData = [[1, 2010], [2, 2543], [3, 2520], [4, 2354]];

                    $.plot($("#flot-graph"), [
                        {
                            data: myData
                        }
                    ]);

                });
            </script>
        </div>

现在这似乎确实在做一些事情，因为它在页面上添加 Canvas 做 div，但它仍然是空白的，实际上没有渲染任何东西。

<div id="flot-graph" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; position: relative;">
    <canvas class="flot-base" style="direction: ltr; position: absolute; left: 0px; top:  0px;">
    </canvas>
</div>

我试过使用 flot-rails gem，以及将 flot 包添加到 vendor/assets 文件夹(并在 application.js 中要求并重新加载 Assets 管道)，但同样的事情发生了，我已经疯了。

Answer 1

如果您检查浏览器的 javascript 错误，您可能会看到:

Uncaught Error: Invalid dimensions for plot, width = , height =

你 need to specify a CSS height and width在你的地 block 上div :

<div id="flot-graph" style="width:300px; height: 200px"></div>

此外，正如我在评论中建议的那样，内嵌一个 <script src=...应避免在 HTML 正文中出现。