在 Rails 中使用 ChartKick 添加网格线答案

【问题标题】：Add Gridlines using ChartKick in Rails在 Rails 中使用 ChartKick 添加网格线
【发布时间】：2021-12-14 22:58:37
【问题描述】：

使用ChartKick 和chart.js 我想添加水平网格线。数据范围是100到200..

我希望每 10 个单位有一个水平网格线。

<script src="https://cdnout.com/jquery/"></script>
<script src="https://cdnout.com/Chart.js/Chart.bundle.min.js"></script>
<script src="http://lib.arvancloud.com/ar/chartkick/2.3.0/chartkick.min.js"></script>

<%
  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, dataset: {borderWidth: 50} %>

我以为dataset: {borderWidth: 50} 会这样做，但它没有明显的效果。

文档引用：

To customize datasets in Chart.js, use:

<%= line_chart data, dataset: {borderWidth: 10} %>
You can pass this option to individual series as well.

与 Chart Kick 中的网格线无关，我不知道如何将 chart.js 转换为 Ruby。

【问题讨论】：

标签： javascript ruby-on-rails ruby chart.js chartkick

【解决方案1】：

所有选项的详细信息都在https://www.chartjs.org/docs/latest/axes/styling.html。

一般形式是这样的：

<%= line_chart chart_path(@obj), 
  code: false,
  points: false, 
  min: 0, 
  max: 20, 
  colors: ["#0284C7", "#44403C"], 
  height: '105px', 
  width: '175px',
  library: { 
    scales: {           
      x: {
       display: false,
      },
      y: {
       display: true,
       font: {
          size: 6,
          weight: 100
      }
    }
  } %>

显示属性表示是否显示网格。

【讨论】：

感谢您的回答。我似乎错过了什么。我的图表

图表看起来与 lib 相同或没有 lib...

【解决方案2】：

问题是我发现的 CDN 已过期。使用来自jsDelivr 的 CDN，网格线就会出现。时间刻度格式不同，但假设是可修复的。所以答案是正确的，或者在正确的道路上。谢谢。

【讨论】：