使用数据库结果集的谷歌图表

Question

我有一个用 Ruby on Rails 编写的代码页（见下文）。 我想显示一些每月的距离。 我有一个局部变量@result 存储我需要的数据集，22 条记录，3 列（从数据库中的控制器中获取它）。以下是数据示例：

year_month | tbm_1_distance | tbm_2_distance 
------------+----------------+----------------
2013-06    |         13.250 |               
...              
2013-09    |         45.000 |         51.780
2013-10    |        131.970 |         51.160
...
2015-01    |        315.050 |        315.050
2015-02    |        287.150 |        287.150
2015-03    |        241.800 |        241.800

我将这些值硬编码在 var aa = .. 但我想通过结果集循环构建 var aa 。 aa 将用于 data.addRows(aa); 不知道如何在代码的 Java 脚本部分执行此操作。 我在文档中找到的所有示例都是硬编码值或使用“新”本地生成的，没有来自数据库结果集。

<% if logged_in? %>
    <% provide(:title, "TBM Monthly Progress") %>
  <h1>
    TBM Monthly Progress
  </h1>

  <h4>
    Number of months: <%=@result.count%>
  </h4>
  <%= render 'main/tbms_main_subnav' %>

  <div class="row">
    <div id="dual_x_div" style="width: 100%; height: 500px;"></div>
  </div>

  <br><br>
<% else %>
  <%= render 'main/unsigned' %>
<% end %>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1.1", {packages:["bar"]});
  google.setOnLoadCallback(drawChart);

  function drawChart() {
    var aa = [
      ['2013-06', 13.250,               0],
      ['2013-07', 45.650,               0],
      ['2013-08', 60.000,               0],
      ['2013-09', 45.000,         51.780],
      ['2013-10', 131.970,         51.160],
      ['2013-11', 166.310,         77.900],
      ['2013-12', 233.790,          0.000],
      ['2014-01', 214.060,        169.630],
      ['2014-02', 151.400,        150.090],
      ['2014-03', 13.880,        329.440],
      ['2014-04', 343.280,        268.280],
      ['2014-05', 338.750,        310.410],
      ['2014-06', 370.470,        342.870],
      ['2014-07', 421.500,        357.340],
      ['2014-08', 323.940,        359.040],
      ['2014-09', 294.890,        294.370],
      ['2014-10', 309.750,        310.050],
      ['2014-11', 284.850,        284.850],
      ['2014-12', 284.950,        284.950],
      ['2015-01', 315.050,        315.050],
      ['2015-02', 287.150,        287.150],
      ['2015-03', 241.800,        241.800]
    ];
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Year-Month');
    data.addColumn('number', 'TBM 1');
    data.addColumn('number', 'TBM 2');
    data.addRows(aa);

    var options = {
      chart: {
        title:    'TBM Excavated Distances per month',
        subtitle: 'TBM 1 in blue, TBM 2 in red'
      },
      bars: 'horizontal'
    };

  var chart = new google.charts.Bar(document.getElementById('dual_x_div'));
  chart.draw(data, options);
};
</script>

Answer 1

您可以在 div 中“通过”@result 和 data-distances：

<div class="row">
  <div id="dual_x_div" ... data-distances="<%= @result %>"></div>
</div>

然后说var aa = $("#dual_x_div").data("distances")

有关如何将数据传递给 javascript 的更多信息，请查看 this railscast 以及有关自定义 data-* 属性的更多信息，请查看 here。