使用 chartkick gem 和 chart.js 在 xAxes 上强制显示刻度答案

【问题标题】：Force display of ticks on xAxes using chartkick gem and chart.js使用 chartkick gem 和 chart.js 在 xAxes 上强制显示刻度
【发布时间】：2019-08-30 03:02:56
【问题描述】：

我正在使用 Chartkick 和 Chart.js 可视化包含两行的数据集，但是，只有 x 轴上的第一个刻度显示

我已尝试按照 chart.js 文档将选项传递给数据集，表明我不希望自动跳过刻度。

<%= line_chart [
      { name: "Successes", data: @successful_requests },
      { name: "Errors", data: @error_requests }
    ],
    dataset:{
      scaleShowValues: true,
      scales: {
        xAxes: [{
          ticks: {
            autoSkip: false
          }
        }]
      }
    },
    legend: "bottom",
    messages: { empty: "Awaiting your first request!" }  
%>

我希望图表显示数据集的 x 轴，并在 x 轴上的所有点上标记。

【问题讨论】：

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

【解决方案1】：

来自文档：

autoSkip

如果为 true，则自动计算可以显示多少标签并相应地隐藏标签。

maxTicksLimit

要显示的刻度线和网格线的最大数量。

autoSkip 选项控制是否在标签文本重叠时自动跳过坐标轴刻度上的某些标签。要控制显示的滴答声 的数量，您要查找的是maxTicksLimit 和相关选项。对于您的用例，您可能应该根据数据集的大小设置maxTicksLimit。

此外，这些选项不能直接在datasets 上设置。相反，您需要使用 library 选项将它们通过 Chartkick 传递给 Chart.js。所以，这样的事情应该可以实现你想要做的事情：

<%= line_chart [
      { name: "Successes", data: @successful_requests },
      { name: "Errors", data: @error_requests }
    ],
    library: {
      scales: {
        xAxes: [{
          ticks: {
            maxTicksLimit: @successful_requests.size
          }
        }]
      }
    },
    legend: "bottom",
    messages: { empty: "Awaiting your first request!" }  
%>

请注意，我假设您的两个数据集的长度始终相同。

【讨论】：