Morris.js特定のタイプのグラフを作成する方法

Question

Morris.jsライブラリを使用してグラフを作成する際にいくつか問題があります。私はスポーツアプリを作成し、すべてのトレーニングにはいくつかの価値があります。そのうちの1つは「トレーニング」です。トレーニングのタイプ（「ランニング」、「スイミング」、「サイクリング」）を意味します。私は日付と距離の折れ線グラフを表示したいが、具体的な訓練の種類は例えば"実行中"とする。私はすべての日付と距離の一般的なグラフを作成しましたが、特定のタイプのグラフを作成しようとすると、適切なものは表示されませんが、毎日のすべての走行距離の合計（横線）でグラフ化されます。 Workout.where（ワークアウト： "実行"）私はworkouts_helper.rb 距離にラインを修正する方法がわからない。合計（：距離）

workouts_helper.rb：

def running_chart_data 
    (3.weeks.ago.to_date..Date.today).map do |date| 
     { 
      date: date, 
      distance: Workout.where(workout: "Running").sum(:distance) 
     } 
    end 
end 

application.html.erb：

<script> 
     new Morris.Line({ 
      element: 'running_chart', 
      resize: true, 
      data: $('#running_chart').data('running'), 
      xkey: 'date', 
      ykeys: ['distance'], 
      labels: ['Distance'] 
     }); 
</script> 

index.html.erb：

<h1>Last 3 weeks running graph</h1> 

     <%= content_tag :div, "", id: "running_chart", data: {running: running_chart_data} %> 

Answer 1

がdistanceあなたWorkoutテーブルの列です、またはそれはあなたのWorkoutモデル内のメソッドですか？

それは列だ場合：

Workout 
    .where(workout: 'Running') 
    .sum(:distance) 

は正常に動作する必要があります。これは、クエリはすべてのために同じ結果セットを返すために起こっていることも注目に値します

Workout 
    .where(workout: 'Running') 
    .to_a 
    .sum(&:distance) 

それとも

Workout 
    .where(workout: 'Running') 
    .sum{ |w| w.distance } 

：それは方法だ場合のように

することは、あなたが何かをする必要がありますあなたの範囲内の日付。これはあなたが本当に欲しいものである場合、それはおそらく、このような反復の外にクエリを移動することは理にかなって：

def running_chart_data 
    distance = Workout 
       .where(workout: 'Running') 
       .sum{ |w| w.distance } 

    ((Date.current - 3.weeks)..Date.current).map do |date| 
    { date: date, 
     distance: distance } 
    end 
end 

は、あなたの質問の上に振り返ってみると、私はあなたの問題はあなたにdateを取っていないということであるかもしれないことを疑いますdistance計算のアカウント

あなたのようなdateのチェックを追加することもできます。

def running_chart_data 
    ((Date.current - 3.weeks)..Date.current).map do |date| 
    distance = Workout 
       .where(workout: 'Running', 
         created_at: date.beginning_of_day..date.end_of_day) 
       .sum(:distance) } 

    { date: date, 
     distance: distance } 
    end 
end