chart.js - 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 轴标签:

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

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
    }
  }
});

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

Answer 1

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

autoSkip: If true, automatically calculates how many labels can be shown and hides labels accordingly. Labels will be rotated up to maxRotation before skipping any. Turn autoSkip off to show all labels no matter what.

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

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>