使用 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 軸在 x 軸上的所有點上都有標記。

Answer 1

從文檔：

自動跳過

如果為 true，則自動計算可以顯示多少標簽並相應地隱藏標簽。

最大TicksLimit

要顯示的最大刻度和網格線數。

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

請注意，我假設您的兩個數據集的長度始終相同。