开始使用rails4中的flot

Question

我想了一些三分球得到一个海军报的"Hello World"相当于运行在我rails4应用程序.我发现了许多创建可爱图形的例子,但我坚持基础,比如,

• 一旦我下载并解压缩了flot-0.8.2.zip文件,我在哪里放置所有这些.js文件？
• 我需要所有这些.js文件吗？
• 我要添加什么app/assets/javascripts/application.js文件？
• ...等等.

我不想使用宝石 - 至少现在还没有 - 因为我想知道引擎盖下发生了什么.

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 .
  

制作图表:

在任何视图文件中(例如/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的内容