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

Question

我在使用 Morris.js 库创建图形时遇到了一些问题。我创建了运动应用程序，每次训练都有一些价值。其中之一是 "workout" 表示锻炼类型("Running","Swimming","Cycling").我想显示带有日期和距离的折线图，但对于特定类型的训练，例如 "Running"。我创建了包含所有日期和距离的通用图表，但是当我尝试为特定类型制作图表时，它不会显示正确的图表，而是显示每天所有运行距离之和的图表（水平线）。我不知道如何修复 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 table 中的一个列，还是您的 Workout 模型中的一个方法？

如果是列：

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

应该可以正常工作。

如果它是一种方法，您需要执行以下操作：

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

或

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

还值得注意的是，查询将为您范围内的每个日期return 相同的结果集。如果这是您真正想要的，将查询移到迭代之外可能是有意义的：

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

回顾你的问题，我怀疑你的问题可能是你没有在 distance 计算中考虑 date。

您可能需要为 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

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

Morris.js how to create graph for specific type

javascript

ruby

ruby-on-rails

morris.js