Rails使用Chartkick+Highcharts绘制x轴为当日时间图表的报错问询

Highcharts Error #13 修复 #

该报错的核心原因是Highcharts初始化时无法找到指定ID的DOM容器，按以下步骤排查修复：

• 确保ID为container的DOM元素在初始化脚本执行前已完成渲染，不要将初始化脚本放在<head>标签内，可将脚本放在<body>末尾，或用DOMContentLoaded事件包裹初始化逻辑
• 检查容器ID拼写，注意大小写敏感，不要出现重复ID
• 如果使用Chartkick渲染图表，无需手动编写Highcharts初始化代码，避免逻辑冲突

当日时段x轴的最简实现 #

无需新增数据库字段，直接在后端预处理数据即可：将所有数据的日期部分统一替换为任意同一天，仅保留时分秒维度，即可让所有数据落在00:00-23:59的时间轴上，代码示例如下：

<%
# 预处理数据：统一日期部分，仅保留时分秒
processed_data = Data.where(statdate: date_in_the_past..current_date).pluck(:statdate, :data).map do |statdate, val|
  [Time.new(2024,1,1, statdate.hour, statdate.min, statdate.sec), val]
end
%>

<%= line_chart processed_data,
  library: {
    xAxis: {
      type: 'datetime',
      # x轴仅显示时分，不展示日期
      labels: { format: '{value:%H:%M}' },
      # 固定x轴范围为全天24小时
      min: Time.new(2024,1,1,0,0,0).to_i * 1000,
      max: Time.new(2024,1,1,23,59,59).to_i * 1000
    }
  }
%>

上述实现对Highcharts和Chart.js均兼容，切换图表库时仅需调整library内的配置格式即可。

内容的提问来源于stack exchange，提问作者Greg