在Rails项目中使用ChartKick与Chart.js添加间隔为10单位的水平网格线的实现疑问

嘿，我明白你想实现的效果——给折线图添加100到200范围、每10单位一条的水平网格线，之前尝试的dataset: {borderWidth: 50}没起作用是因为这个配置是用来调整数据线条宽度的，和网格线完全不相关~

ChartKick允许通过library选项直接传递Chart.js的底层配置，而网格线属于y轴（纵轴）的刻度/网格配置，具体要这么做：

完整的Rails视图代码示例 #

<% begin_tracking = Time.zone.parse('2021-03-24 18:33:00-07') %>
<% current_date = Time.now %>
<%= line_chart DataTable.where(statdate: begin_tracking..current_date).pluck(:statdate, :data_ordinate), 
    min: 100, 
    max: 200,
    library: {
      scales: {
        y: {
          min: 100,
          max: 200,
          ticks: {
            stepSize: 10, # 每10单位显示一个刻度（对应网格线）
            beginAtZero: false
          },
          grid: {
            display: true, # 开启水平网格线
            drawBorder: true, # 保留y轴边框
            drawOnChartArea: true # 在图表区域内绘制网格线
          }
        }
      }
    } %>

关键配置解释 #

• library：这是ChartKick用来传递Chart.js全局配置的核心选项，所有非数据集的图表全局设置都要放在这里
• scales.y：针对纵轴（y轴）的配置
  • min/max：强制设置y轴的数值范围为100到200（和你外层的min/max作用一致，这里重复设置是为了确保Chart.js的刻度系统能精准识别）
  • ticks.stepSize: 10：指定刻度之间的间隔为10，这样就会自动生成每10单位一条的水平网格线
  • grid.display: true：确保水平网格线可见（默认可能已经开启，但显式设置更保险）

额外样式调整提示 #

如果想要自定义网格线的外观（比如颜色、线条宽度），可以在grid里添加更多属性，比如：

grid: {
  display: true,
  color: "#e0e0e0", # 网格线颜色
  lineWidth: 1.5 # 网格线宽度
}

这样配置后，你的折线图就会显示100-200范围内、每10单位一条的水平网格线啦~

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