使用 chartkick gem 和 chart.js 在 xAxes 上强制显示刻度 [英] Force display of ticks on xAxes using chartkick gem and chart.js

问题描述

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

I'm using Chartkick and Chart.js to visualize a data set of two lines, however, only the first tick on the x-axis displays

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

I've tried passing options to the dataset as per the chart.js docs, indicating that I would not like the ticks to auto skip.

<%= 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 轴上的所有点处进行标记.

I expect the chart to show a dataset an x-axis that is labeled at all points on the x-axis.

推荐答案

来自文档:

自动跳过

如果为 true，则自动计算可以显示的标签数量并相应地隐藏标签.

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

maxTicksLimit

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

Maximum number of ticks and gridlines to show.

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

The autoSkip option controls whether some of the labels on the axes ticks are automatically skipped when the label texts would otherwise overlap. To control the number of ticks being displayed, what you're looking for is maxTicksLimit and related options. For your use case, you should probably set maxTicksLimit depending on the size of your data sets.

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

Also, these options can't be set on the datasets directly. Instead, you need to pass them through Chartkick to Chart.js by using the library option. So, something like this should achieve what you're trying to do:

<%= 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!" }  
%>

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

Note that I'm assuming both your data sets are always of the same length.

这篇关于使用 chartkick gem 和 chart.js 在 xAxes 上强制显示刻度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！