1

所以我试图让 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>

现在这似乎确实在做某事，因为它正在将画布添加到页面上的 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 中要求并重新加载资产管道），但同样的事情发生了，我已经疯了.

4

1 回答 1

2

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

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

您需要在绘图上指定 CSS 高度和宽度div：

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

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

于 2013-11-14T00:44:44.040 回答