0

嗨,我正在尝试在我的应用程序上使用 highcharts ......为此,我正在关注highcharts 情节,脚本有效,但是当我想输入真实数据时,我得到了这个: 在此处输入图像描述

我已按照所有步骤操作,但这是我的模型:

class TankingLog < ActiveRecord::Base
belongs_to :gas_station 
belongs_to :car
attr_accessible :car_id, :cost, :date, :gallon, :gas_station_id, :km
validates_presence_of :cost, :date,:gallon,:km
validates_numericality_of :cost, :gallon
validates_numericality_of :km #:only_integer
def self.total_on(date)
    where("date(date) = ?",date).sum(:cost)
end
end

这是我的 html.erb:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
        }
    </style>
</head>
<body>
  <div class="container">
  <h1>Listing Tankings</h1>
  <% if @tankinglog.count<1 %>
    <p>
    There are no tankings for this car. Do you want to <%= link_to 'create a new tanking', new_user_car_tanking_log_path(@user, @car)%>
    </p>
  <% else %>
  <script type="text/javascript" charset="utf-8">
    $(function () {
      new Highcharts.Chart({
      chart: { renderTo: 'foo_chart' },
      title: { text: 'Tankings by Day' },
      xAxis: { type: 'datetime' },
      yAxis: {
      title: { text: 'Cost' }
    },
      series: [{
        pointInterval: <%= 1.day * 1000 %>,
        pointStart: <%= 0.weeks.ago.at_midnight.to_i * 1000 %>,
        data: [data: <%= (1.weeks.ago.to_date..Date.today).map { |date| TankingLog.total_on(date).to_f}.inspect %>]
      }]
      });
    });
  </script>
  <div id="foo_chart" style="width: 560px; height: 300px;"></div>

    <table class="table table-condensed">
      <tr>
        <th>Cost</th>
        <th>Gallon</th>
        <th>Km</th>
        <th>Date</th>
        <th>Gas Station's id</th>
        <th></th>
      </tr>
      <% for tankinglog in @tankinglog  %>
        <tr>
          <td><%= number_to_currency (tankinglog.cost) %></td>
          <td><%= tankinglog.gallon %></td>
          <td><%= tankinglog.km %></td>
          <td><%= tankinglog.date %></td>
          <td><%= tankinglog.gas_station_id %></td>
        </tr>
      <% end %>
    </table>
    <br />
    <%= link_to 'New tanking', new_user_car_tanking_log_path(@user, @car), :class => "btn btn-primary" %>
  <% end %>
  <br />
  <br />
  <%= link_to 'back', user_cars_path(current_user), :class => "btn btn-primary" %>
  </div> <!-- /container -->
</body>

感谢您的帮助

这也是我的脚本显示: 在此处输入图像描述

4

2 回答 2

1

你有它试图渲染到的 foo_chart div 吗?在包含 highcharts 的 js 之前是否包含了 jQuery 的 js?浏览器“控制台”的内容是什么?控制台有没有js错误?您可以将生成的 html 分享为文本而不是图像吗?

如何从控制台获取错误(Chrome) 在此处输入图像描述

点击行号会带你到js崩溃的确切地方

于 2012-08-06T17:48:02.810 回答
0

是我的错,我有一个语法错误,它是:

series: [{
        pointInterval: <%= 1.day * 1000 %>,
        pointStart: <%= 0.weeks.ago.at_midnight.to_i * 1000 %>,
        data: <%= (0.weeks.ago.to_date..Date.today).map { |date| TankingLog.total_on(date).to_f}.inspect %>
      }] 

不是

series: [{
    pointInterval: <%= 1.day * 1000 %>,
    pointStart: <%= 0.weeks.ago.at_midnight.to_i * 1000 %>,
    data: [data: <%= (1.weeks.ago.to_date..Date.today).map { |date| TankingLog.total_on(date).to_f}.inspect %>]
  }]

感谢帮助

于 2012-08-06T19:58:01.140 回答