回调 Return None 删除网格线

Question

在chart.js折线图中，我仅每720个刻度放置一条垂直网格线，效果很好。 然后我使用回调在 x 轴上添加一个数字，它会删除我漂亮的网格线。 网站上也对此进行了解释 https://www.chartjs.org/docs/latest/axes/labelling.html#creating-custom-tick-formats

数组中有 24×60×15 个值。我想要每 60 次 15 个值一条网格线，从右到左标记为 0 到 -23。该数组每 5 秒更新一次，其中最后一个值被删除。

图表显示过去 24 小时的值。

谢谢你。 吉尔特

        x: {
      beginAtZero: false, // X-axis should not start from 0
      grid: {
        display: true, // Ensure gridlines are displayed
        // drawTicks: false, // Disable tick-based control of gridlines
        color: function(context) {
          // Use context.index to control gridline color every hour
          if (context.index % 720 === 0) {
            return 'rgba(179, 179, 179, 0.2)'; // Hourly gridline color
          }
          // return 'transparent'; // Hide non-hourly gridlines
        }
      }, //grid x
      ticks: {
        display: true, // Show tick labels
        callback: function(value, index, ticks) {
          // Show a label every hour (720 indices)
          if (index % 720 === 0) {
            return  -24 + index / 720; // Calculate hour number
          }
          return ; 
        }
      } //ticks

我一直在努力让这项工作成功。仅当我将 if 语句的返回移到网格线显示的 if 语句之外时，但仅限于 6 个索引。这似乎不是正确的方法，并且不适用于缩放。

也许有人知道这个问题以及如何解决它？

Answer 1

我通过禁用自动跳过并在回调函数的 if 语句中返回一个空字符串来解决这个问题。

    x: {
      beginAtZero: false, // X-axis should not start from 0
      grid: {
        display: true, // Ensure gridlines are displayed
        // drawTicks: false, // Disable tick-based control of gridlines
        color: function(context) {
          // Use context.index to control gridline color every hour
          if (context.index % 720 === 0) {
            return 'rgba(179, 179, 179, 0.2)'; // Hourly gridline color
          }
          // return 'transparent'; // Hide non-hourly gridlines
        }
      }, //grid x
      ticks: {
        display: true, // Show tick labels
        autoSkip: false,
             
        callback: function(value, index, ticks) {
          // Show a label every hour (720 indices)
          if (index % 1440 === 0) { // i used 1440 in stead of 720 to get less labels
            return  -24 + index / 720; // Calculate hour number
          }
          return '';
        }
      } //ticks

    }  //x