Javascript 使用Ruby on Rails绘制过去30天的Highcharts数据

我正试图找出最好的方法，将我需要的数据从Rails后端公开到前端，以绘制过去30天的数据，而不管在过去30天的每一天是否记录了条目

我的控制器代码如下所示：

@symptoms = @current_member.symptoms

@symptoms_array ||= []

@symptoms.each do |symptom|
    array = [ Time.parse(symptom.date).getutc.iso8601, symptom.level.to_i ]
    @symptoms_array.push(array)
end

在我看来，我只是将数据放入元素上的

data

属性中，以便用JS读取（我知道，有更好的方法可以做到这一点…）

然后我的Highcharts JS实例化如下所示：

const data = $('#graph').data('symptoms');

Highcharts.chart('graph', {
    chart: {
        type: 'column',
        title: 'Pain levels'
    },
    xAxis: {
        categories: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
        title: {
            text: 'Date'
        }
    },
    yAxis: {
        title: {
            text: 'Pain level'
        },
        min: 0,
        max: 10,
        tickInterval: 1
    },
    tooltip: {
        headerFormat: '<b>{series.name}</b><br>',
        pointFormat: '{point.y}'
    },
    series: [{
        name: 'Pain level',
        data: data
    }]
});

const data=$（'#graph'）。数据（'症状'）；
Highcharts.chart（'graph'{
图表：{
键入：“列”，
标题：“疼痛程度”
},
xAxis：{
类别：['S'，'M'，'T'，'W'，'T'，'F'，'S']，
标题：{
文本：“日期”
}
},
亚克斯：{
标题：{
文字：“疼痛程度”
},
分:0,，
最高：10，
时间间隔：1
},
工具提示：{
headerFormat:“{series.name}
”，
pointFormat:“{point.y}”
},
系列：[{
名称：“疼痛程度”，
数据：数据
}]
});

---

我需要的是让图表显示过去30天内每天的症状，不管当天是否有条目（它应该只显示0，连续几天没有条目）。X轴应该显示M…F与一周中的某一天相关。现在，对于硬编码数组，它只显示M、T、W、T、F、S、S、7、8、9、10等。我建议您将

groupdate

gem（）与

chartkick

（）结合使用。 在您的情况下，您可以简单地使用以下内容：

@symptoms = current_user.symptoms.group_by_day(:created_at).count

使所有症状按天汇总。然后绘制它们，例如：

<%= column_chart @symptoms %>

---

查看gems文档了解更多示例。

有两件事需要考虑：数组需要包含所有日期，包括没有数据的日期，并且每个日期都需要采用适当的格式；因此，我将执行以下操作：

更新控制器以返回散列（而不是数组）

Create helper方法创建

数据系列

数组

使用

标签

代替图表中的

类别

控制器 创建一个散列来存储值，其中每个键都是

日期

（以

日期

格式），其值是

级别

：

def action
  @symptoms_hash = @current_member.symptoms.each do |symptom|
    date = Time.parse(symptom.date).getutc.iso8601.to_date
    symptoms_hash[date] = symptom.level.to_i
  end
end

注意添加了

.to_date

，这将允许我们更容易地将日期转换为javascript格式

帮手 要更好地理解，请注意以下几点：

• dates

  表示要绘制的时间范围，并从

  symptoms\u hash

  中的最小和最大日期获取其第一个和最后一个日期

• Date.UTC

  用于创建有效的javascript日期，以便highcharts可以将其识别为日期，这将使我们获得一周中的匹配日期
• 之所以使用

  date.month-1

  ，是因为javascript中的月份以

  0

  开头，您需要将

  1

  减到日期的月份，否则您会得到错误的日期
• 返回值是字符串数组，但我们将在视图中将其转换为数组数组

看法 使用刚刚创建的帮助器设置

数据

，并将

类别

替换为

标签

，这将需要一个自定义的

格式化程序

来显示星期一名称中的第一个字母

<script type="text/javascript">
  const data = [<%= data_series(@symptoms_hash).join(",") %>];

  Highcharts.chart('graph', {
      chart: {
          type: 'column',
          title: 'Pain levels'
      },
      xAxis: {
          type: 'datetime',
          labels: {
            formatter: function() {
              var dayOfWeek   = Highcharts.dateFormat('%A', this.value);
              var firstLetter = dayOfWeek.substring(0, 1);
              return firstLetter;
          }
          },
          title: {
              text: 'Date'
          }
      },
      yAxis: {
          title: {
              text: 'Pain level'
          },
          min: 0,
          max: 10,
          tickInterval: 1
      },
      tooltip: {
          headerFormat: '<b>{series.name}</b><br>',
          pointFormat: '{point.y}'
      },
      series: [{
          name: 'Pain level',
          data: data
      }]
  });
</script>

常量数据=[]；
Highcharts.chart（'graph'{
图表：{
键入：“列”，
标题：“疼痛程度”
},
xAxis：{
键入：“日期时间”，
标签：{
格式化程序：函数（）{
var dayOfWeek=Highcharts.dateFormat（'%A'，this.value）；
var firstLetter=星期天子字符串（0,1）；
返回第一封信；
}
},
标题：{
文本：“日期”
}
},
亚克斯：{
标题：{
文字：“疼痛程度”
},
分:0,，
最高：10，
时间间隔：1
},
工具提示：{
headerFormat:“{series.name}
”，
pointFormat:“{point.y}”
},
系列：[{
名称：“疼痛程度”，
数据：数据
}]
});

请注意，

连接

在设置

数据

时，它用于创建图表

系列

工作所需的数组

<script type="text/javascript">
  const data = [<%= data_series(@symptoms_hash).join(",") %>];

  Highcharts.chart('graph', {
      chart: {
          type: 'column',
          title: 'Pain levels'
      },
      xAxis: {
          type: 'datetime',
          labels: {
            formatter: function() {
              var dayOfWeek   = Highcharts.dateFormat('%A', this.value);
              var firstLetter = dayOfWeek.substring(0, 1);
              return firstLetter;
          }
          },
          title: {
              text: 'Date'
          }
      },
      yAxis: {
          title: {
              text: 'Pain level'
          },
          min: 0,
          max: 10,
          tickInterval: 1
      },
      tooltip: {
          headerFormat: '<b>{series.name}</b><br>',
          pointFormat: '{point.y}'
      },
      series: [{
          name: 'Pain level',
          data: data
      }]
  });
</script>