javascript - 使用 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

If true, automatically calculates how many labels can be shown and hides labels accordingly.

maxTicksLimit

Maximum number of ticks and gridlines to show.

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

此外，这些选项无法直接在数据集上设置。相反，您需要使用 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!" }  
%>

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