如何让手图在 Rails 中工作

How to get flot charts working in Rails?

本文关键字：Rails 工作      更新时间：2023-09-26

所以我试图让 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 包添加到供应商/资产文件夹（并在应用程序中需要.js并重新加载资产管道），但同样的事情发生了，我已经疯了。

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

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

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

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

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

相关文章：