2012-08-06 87 views
0

你好我想在我的應用程序中使用highcharts ......對於我之後的highcharts episode劇本的作品,但我想把我得到這個真實的數據: enter image description herehighcharts與軌道

我已經照着所有的步驟,但這裏是我的模型:

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> 

感謝您的幫助

也在這裏是我的腳本顯示: enter image description here

回答

1

你有它正試圖呈現到foo_chart DIV?在包含highcharts'js之前,您是否包含了jQuery的js?瀏覽器的「控制檯」的內容是什麼?控制檯是否有任何js錯誤?你可以分享生成的HTML,因爲文字不是圖像?

如何從控制檯錯誤(鉻) enter image description here

點擊行號將帶你到那裏JS爆發

+0

是的,我有div – Asantoya17 2012-08-06 17:50:43

+0

雅,看到您的腳本,主要是看圖像,所以錯過了它的第一次。控制檯數據將是最好的幫助 – 2012-08-06 17:52:18

+0

我如何使用控制檯數據? – Asantoya17 2012-08-06 18:24:16

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 %> 
     }] 

isntead

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 %>] 
    }] 

感謝您的幫助