javascript - 开始使用 float in rails 4

Question

我希望得到一些在我的 rails4 应用程序中运行的 flot “hello world” 等效项的指示。我发现了很多创建可爱图表的示例，但我停留在基础知识上，例如，

• 下载并解压缩 flot-0.8.2.zip 文件后，我应该将所有这些 .js 文件放在哪里？
• 我需要所有这些 .js 文件吗？
• 我要在 app/assets/javascripts/application.js 文件中添加什么？
• ...等等

我宁愿不使用 gem —— 至少现在不使用 —— 因为我想了解幕后发生的事情。

Answer 1

在看过一些 Heroku 示例后回答我自己的问题:

设置:

• 转到http://www.flotcharts.org/
• 下载http://www.flotcharts.org/downloads/flot-0.8.2.zip (或最新的)到您选择的目录
• 解压
• 复制jquery.flot.js到/app/assets/javascripts目录

• 编辑/app/assets/javascripts/application.js 以包含 jquery.flot.js，如:

  //= require jquery
  //= require jquery_ujs
  //= require jquery.flot.js
  //= require turbolinks
  //= require_tree .
  

制作图表:

在任何 View 文件中(例如/app/views/myclass/index.html.erb)，添加以下内容:

<!-- create a placeholder for the flot graph -->
<div id="flot-placeholder" style="width:300px; height: 200px"></div>

<script type="text/javascript">
$(function() {
    var d1 = [];
    for (var i = 0; i < 14; i += 0.5) {
        d1.push([i, Math.sin(i)]);
    }
    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
    // A null signifies separate line segments
    var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
    $.plot("#flot-placeholder", [ d1, d2, d3 ]);
});
</script>

测试一下:

渲染页面。您应该会看到类似于 http://www.flotcharts.org/flot/examples/basic-usage/index.html 的内容