带有 Ruby on Rails 的 Google Charts API答案

【问题标题】：Google Charts API with Ruby on Rails带有 Ruby on Rails 的 Google Charts API
【发布时间】：2013-12-07 05:56:24
【问题描述】：

我想绘制如下的时间序列数据，

   timestamp, temperature
   12-12-2013 05:05:05, 25.569
   12-12-2013 05:05:10, 25.570
   12-12-2013 05:05:15, 26.000

我知道我可以使用 javascript 创建图表，只需将其放入视图中即可：

<head>
    <script type="text/javascript" src="https://www.google.com/jsapi" ></script>
    <script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
     var data = google.visualization.arrayToDataTable([
    ['t', 'temperature', 'data'],
    ['2004',  1000,      400],
    ['2005',  1170,      460],
    ['2006',  660,       1120],
    ['2007',  1030,      540]
  ]);

  var options = {
    title: 'Company Performance'
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
   </script>
</head>

我的ruby数组长这样，和上面代码中的格式类似：

  [['timestamp', 'temperature'], [12-12-2013 05:05:05, 25.569], [12-12-2013 05:05:10, 25.570]
   ... and so on]

我是否需要将时间转换为纪元时间来绘制它的顺序，以及如何在上面的 javascript 中插入一个 ruby 声明的变量？还是我在这里做错了什么？

谢谢，感谢您的帮助。

【问题讨论】：

标签： javascript ruby-on-rails graph google-visualization

【解决方案1】：

当我解决这个问题时，我遇到了一些日期问题，现在不记得具体是什么了。但我已经从 ruby 以字符串形式发送日期，例如

date_for_js = "#{year}, #{month-1}, #{day}"

数据为

points_by_dates << [date_for_js, user.points.to_i]

然后我创建了 .html.erb 文件

<%= javascript_tag do %>
    google.load('visualization', '1.0', {'packages':['corechart'], 'language': '<%= @locale.code %>'});
    google.setOnLoadCallback(drawChart);

    function drawChart() {
            var progress_chart_data = new google.visualization.DataTable();
            progress_chart_data.addColumn('date', '<%=j t(".date") %>');
          progress_chart_data.addColumn('number', '<%=j t(".points") %>');
            var progress_ticks = [];
            <% @points_by_dates.each_with_index do |points_by_date, index| %>
                progress_chart_data.addRow([new Date(<%= points_by_date[0] %>), <%= points_by_date[1] %>]);
                progress_ticks[<%= index %>] = new Date(<%= points_by_date[0] %>);
            <% end %>

            var date_format = 'MMM yyyy';

            var progress_chart_options = {
                legend: {position: 'out'},
                axisTitlesPosition: 'out',
                width: '800px',
              height: '300',
              hAxis: {format: date_format, ticks: progress_ticks},
                colors: ['#63c6d9'],
                vAxis: {minValue: 0},
                chartArea: {left: 90, top: 10}
            };
            var formatter = new google.visualization.DateFormat({pattern: date_format});
        formatter.format(progress_chart_data, 0); // Apply formatter to first column

        <% if @points_by_dates.present? %>
                var progress_chart = new google.visualization.AreaChart(document.getElementById('progress_chart'));
            progress_chart.draw(progress_chart_data, progress_chart_options);
        <% end %>
    };
<% end -%>

您在 ticks 选项中定义日期的位置。

希望对你有用。

【讨论】：

【解决方案2】：

回答您的第二个问题，即如何在 javascript 中输入此变量是使用 gon gem https://github.com/gazay/gon。基本上它的作用是在你的 javascript 的窗口命名空间中创建一个名为 gon 的变量。事实上，您可以通过在视图文件中的脚本标签内创建自己的全局变量并调用在此处生成此数组的帮助程序来避免此 gem。但是 Gon 是一种简洁的方式，因此我更喜欢它

【讨论】：

【解决方案3】：

arrayToDataTable 方法不支持日期，因此您必须改用常规的 DataTable 构造函数：

var data = new google.visualization.DataTable();
data.addColumn('date', 't');
data.addColumn('number', 'temperature');
data.addColumn('number', 'data');
data.addRows(/* output from Ruby */);

您的时间戳需要作为 javascript Date 对象输出。您可以使用 Unix 纪元时间或将时间戳拆分为年、月、日、小时、分钟、秒来执行此操作。 Unix纪元时间的使用格式为：

new Date(/* Unix epoch time */);

年/月/日的格式为：

new Date(year, month, day, hour, minute, second);

其中月份以 0 为索引，因此一月为 0，二月为 1...十二月为 11。

【讨论】：