ChartJS 轴刻度回调函数中的条件未返回预期的标签

Question

我有一个包含一年中每一天数据的图表，我想将 x 轴简单地显示为月份。

我设置了以下回调函数，它（粗略地）从标签集中获取月份，检查它是否已经存在，如果不存在，则将其作为轴标签返回

let rollingLabel;
...
function(label, index, labels) {
    let _label = label.replace(/[0-9]/g, '');
              
    if (rollingLabel != _label) {
        rollingLabel = _label;
        return rollingLabel;
    }
}

但是，它只返回预期的四个标签中的两个。

更让我困惑的是，如果我console.log(rollingLabel)在条件中添加，我可以看到变量正在按照我预期的方式更新，但它没有返回值，或者它是，并且图表由于任何原因没有拾取它。更令人困惑的是，如果我取消注释第 48 行，// return _label图表会更新所有标签，因此我不认为这是图表的最大/最小设置的问题。

如果有人有任何想法，我将不胜感激。我已经盯着它看了好几个小时了！

以下代码片段的预期输出应具有以下 x 轴标签：

八月 | 九月 | 十月 | 十一月

let rollingLabel;
...
function(label, index, labels) {
    let _label = label.replace(/[0-9]/g, '');
              
    if (rollingLabel != _label) {
        rollingLabel = _label;
        return rollingLabel;
    }
}

const canvas = document.getElementById('chart');
const ctx    = canvas.getContext('2d');

let data     = [
  1,6,3,11,5,1,2,6,2,10,5,8,1,1,2,4,5,2,3,1
];

let labels = [
  "Aug 1","Aug 2","Aug 3","Aug 4","Aug 5","Sep 1","Sep 2","Sep 3","Sep 4","Sep 5","Oct 1","Oct 2","Oct 3","Oct 4","Oct 5","Nov 1","Nov 2", "Nov 3","Nov 4","Nov 5"
];

let rollingLabel;

chart = new Chart(ctx, {
  type: "line",
  data: {
    datasets: [
      {
        backgroundColor: '#12263A',
        data: data,
        pointRadius: 0
      }
    ],
    labels: labels,
  },
  options: {
    legend: {
      display: false
    },
    responsive: false,
    scales: {
      xAxes: [
        {
          gridLines: {
            display: false
          },
          ticks: {
            display: true,
            autoSkip: true,
            callback: function(label, index, labels) {
              let _label = label.replace(/[0-9]/g, '');
              
              if (rollingLabel != _label) {
                rollingLabel = _label;
                return rollingLabel;
              }
              
              // return _label;
            }
          }
        }
      ]
    },
    tooltips: {
      mode: "index",
      intersect: false
    },
    hover: {
      mode: "index",
      intersect: false
    }
  }
});

Answer 1

我通过 Chart.js文档找到了一个简单的解决方案。

const config = {
  type: 'line',
  data: data,
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Chart with Tick Configuration'
      }
    },
    scales: {
      x: {
        ticks: {
          // For a category axis, the val is the index so the lookup via getLabelForValue is needed
          callback: function(val, index) {
            // Hide the label of every 2nd dataset
            return index % 2 === 0 ? this.getLabelForValue(val) : '';
          },
          color: 'red',
        }
      }
    }
  },
};

回调函数决定将显示哪些标签。当前设置显示每第二个标签，如果您想显示每第三个标签，例如您可以更改：

return index % 2 === 0 ? this.getLabelForValue(val) : '';

到：

return index % 3 === 0 ? this.getLabelForValue(val) : '';

Answer 2

您需要ticks.autoSkip: false在 x 轴上定义才能使其按预期工作：

autoSkip：如果true，自动计算可以显示的标签数量并相应地隐藏标签。标签将旋转到maxRotation跳过任何标签之前。autoSkip无论如何，关闭以显示所有标签。

请查看下面修改后的代码：

let data     = [
  1,6,3,11,5,1,2,6,2,10,5,8,1,1,2,4,5,2,3,1
];

let labels = [
  "Aug 1","Aug 2","Aug 3","Aug 4","Aug 5","Sep 1","Sep 2","Sep 3","Sep 4","Sep 5","Oct 1","Oct 2","Oct 3","Oct 4","Oct 5","Nov 1","Nov 2", "Nov 3","Nov 4","Nov 5"
];

let rollingLabel;

chart = new Chart('chart', {
  type: "line",
  data: {
    datasets: [
      {
        backgroundColor: '#12263A',
        data: data,
        pointRadius: 0
      }
    ],
    labels: labels,
  },
  options: {
    legend: {
      display: false
    },
    responsive: false,
    scales: {
      xAxes: [
        {
          gridLines: {
            display: false
          },
          ticks: {
            display: true,
            autoSkip: false,
            callback: function(label, index, labels) {
              let _label = label.replace(/[0-9]/g, ''); 
              if (rollingLabel != _label) {
                rollingLabel = _label;
                return rollingLabel;
              }
            }
          }
        }
      ]
    },
    tooltips: {
      mode: "index",
      intersect: false
    },
    hover: {
      mode: "index",
      intersect: false
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart"></canvas>