Question

我想在我的 rails4 应用中运行 flot “hello world”等等。我已经找到了许多创建可爱图形的例子，但我坚持基础知识，比如，

一旦我下载并解压缩了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

类似的内容

Answer 2

我建议使用chartkicks，一个rubygem？

安装：

将gem添加到您的gemfile
在application.js中，添加：

// = require Chart.bundle // =需要chartkick
查看documentation以了解如何操作数据选项。

开始在轨道浮动4

2 个答案:

设置：

制作图表：

测试它：