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

Question

我正在使用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轴的所有点上都标出。

Answer 1

来自文档：

autoSkip

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

maxTicksLimit

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

autoSkip选项控制当标签文本重叠时是否自动跳过轴刻度上的某些标签。要控制显示的ticks的数量，您需要的是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!" }  
%>

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