javascript - Morris.js 如何为特定类型创建图表

Question

我在使用 Morris.js 库创建图表时遇到一些麻烦。我创建了运动应用程序，每次训练都有一些值(value)。其中之一是“锻炼”，它表示锻炼类型(“运行”、“游泳”、“骑自行车”)。我想显示带有日期和距离的折线图，但针对特定类型的训练，例如“运行”。我创建了包含所有日期和距离的通用图表，但是当我尝试为特定类型制作图表时，它没有显示正确的图表，而是显示每天所有运行距离之和的图表(水平线)。我不知道如何修复workouts_helper.rb中的行distance: Workout.where(workout: "Running").sum(:distance)

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

回顾您的问题，我怀疑您的问题可能是您在计算距离时没有考虑日期。

您可能需要添加对日期的检查，例如:

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