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

Question

我正在尝试找出将我需要的数据从 Rails 后端公开到前端以绘制过去 30 天的数据的最佳方法，无论这些天是否记录了条目是否过去 30 天。

我的 Controller 代码如下所示:

@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 读取(我知道，有更好的方法来做到这一点...)。

<div id="graph" class="graph" data-symptoms="<%= @symptoms_array %>">

然后我的 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
    }]
});

我需要的是让图表显示过去 30 天内每一天的症状，而不管那天是否有条目(对于没有条目的天数，它应该只显示 0)。 X 轴应显示与星期几相关的 M...F。现在，使用硬编码数组，它只显示 M、T、W、T、F、S、S、7、8、9、10 等。

Answer 1

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

1. 更新 Controller 以返回散列(而不是数组)。
2. 创建助手 方法来创建 data_series数组。
3. 使用label而不是 categories在图表中。

Controller

创建一个散列来存储值，其中每个键都是 date (采用 Date 格式)，其值为 level :

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 格式。

助手

def data_series(symptoms_hash)
  dates = (symptoms_hash.keys.min..symptoms_hash.keys.max).to_a

  dates.map do |date, value|
    js_date = "Date.UTC(#{date.year}, #{date.month - 1}, #{date.day})"
    "[#{js_date}, #{symptoms_hash[date].to_i}]"
  end
end

一些注意事项以更好地理解:

• dates表示要绘制的时间范围，并从 symptoms_hash 中的最小和最大日期获取其第一个和最后一个日期.
• Date.UTC用于创建有效的 javascript 日期，以便 highcharts 可以将其识别为 date，这将使我们获得匹配的星期几。
• date.month - 1使用是因为 javascript 中的月份以 0 开头你需要减去1到日期的月份，否则你会得到错误的日期。
• 返回值是一个字符串数组，但是我们会在 View 中把它变成一个数组数组。

查看

设置data使用刚刚创建的助手并替换 categories与 labels ，这将需要自定义 formatter显示星期几名称中的第一个字母。

<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>

注意 join设置 data 时, 它用于创建图表所需的数组 series去工作。