ChartJS轴中的条件滴答回调函数未返回预期的标签 [英] Conditional in ChartJS axes tick callback function isn't returning the expected labels

问题描述

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

I have a chart containing data for each day of the year and I'm wanting to show the x-axis simply as months.

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

I've set up the following callback function which (crudely) grabs the month from the set of labels, checks to see whether it already exists and if not, returns it as an axis label

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

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

However, it's only returning two of the expected four labels.

更让我困惑的是，如果我在条件中添加 console.log(rollingLabel)，我可以看到该变量正在更新期望值，但没有返回值，或者是，无论出于何种原因，图表都没有选择.更令人困惑的是，如果我取消注释第48行//返回_label ，图表将更新所有标签，因此我认为图表的最大/最小设置不会有问题.

What's confusing me more is that if I add console.log(rollingLabel) within the conditional I can see that the variable is updating how I'd expect but it's not returning the value, or it is and the chart isn't picking it up for whatever reason. Even more confusing is that if I uncomment line 48 // return _label the chart updates with all the labels so I don't believe it's an issue with max/min settings for the chart.

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

If anyone has any ideas I'd be most grateful. I've been staring at it for hours now!

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

The expected output for the below snippet should have the following x-axis labels:

八月|9月|十月|十一月

Aug | Sep | Oct | Nov

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>

推荐答案

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

You need to define ticks.autoSkip: false on the x-axis to make it work as expected:

autoSkip :如果 true ，则自动计算可以显示多少标签并相应地隐藏标签.标签将在跳过任何标签之前向上旋转到 maxRotation .关闭 autoSkip 可以显示所有标签，无论如何.

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.

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

Please take a look at your amended code below:

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>

这篇关于ChartJS轴中的条件滴答回调函数未返回预期的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！