代码之家  ›  专栏  ›  技术社区  ›  Daniel

帮助使用Flotilla和Ruby on Rails

  •  3
  • Daniel  · 技术社区  · 17 年前

    我是Rails(和StackOverflow)的新手,如果这是一个“愚蠢”的问题,我深表歉意。我编写了一个非常简单的Rails应用程序。它从另一台服务器接收数据(通过HTTP POST)。我想用图表显示发送的数据,尤其是温度与时间的关系。

    我正在尝试使用 Flotilla 生成这些图表,但除了主页上的一行示例外,我似乎找不到多少关于如何使用它的文档:

            = chart("graph", {"Store 1" => {:collection => @store_one, :x => :date, :y => :sales }, "Store 2" => {:collection => @store_two, :x => :date, :y => :sales }})
    

    这是我的索引。html。雇员再培训局:

    <table>
      <tr>
        <th>Temperature</th>
        <th>Time</th>
      </tr>
    
    <% for post in @posts %>
      <tr>
        <td><%=h post.temperature %></td>
        <td><%=h post.created_at %></td>
      </tr>
    <% end %>
    </table>
    <%= chart("graph", { "Graph1" => { :collection => @posts, :x => :created_at, :y => :temperature }})%>
    <br />
    

    第一部分只是打印出温度和时间列表。这个很好用。不幸的是,第二部分——实际的图表——似乎不起作用。实际上什么都没有显示。

    如果我查看生成的HTML的源代码,我会看到:

        <script language="javascript" type="text/javascript" src="/javascripts/jquery.flot.pack.js"></script>
        <script type="text/javascript">
          $.plot($('#graph'), [{"data":[[1234191865.0,12.0],[1234192069.0,15.0],[1234192113.0,16.0],[1234192123.0,18.0],[1234192189.0,21.0],[1234192203.0,25.0],[1234192320.0,27.0],[1234192329.0,29.0],[1234192384.0,30.0],[1234192391.0,31.0],[1234192402.0,35.0],[1234192409.0,29.0],[1234192412.0,31.0],[1234192414.0,27.0],[1234192419.0,25.0],[1234211826.0,27.0]],"label":"Graph1"}], {});
        </script>
    

    但没有显示实际的图形。提前感谢您的帮助。

    2 回复  |  直到 17 年前
        1
  •  6
  •   Pablo Castro    15 年前

    对我来说,有效的方法是在视图顶部添加这一行:

    <%= javascript_include_tag 'jquery-1.5.1','flot/jquery.flot.js','excanvas.pack.js','jquery.flot.pack.js' %>
    

    这意味着在我的视图中包含使用flot所需的所有Java脚本。还要确保所有的js文件都在/public/javascripts/文件夹下

        2
  •  5
  •   Tim Cooper    14 年前

    尝试添加一个 div id为的元素 graph 在你的页面的任何地方;它将被用作图表的画布。

    <div id="graph" style="width:600px;height:300px;"></div>

    这个 id 元素的类型必须与作为第一个参数传递给的字符串匹配 chart .

    如果有疑问,可以查看 various example pages 在弗洛特网站上。