在X轴上显示第n个标签。

Question

我想用ChartJS来显示天气数据，但我在设置X轴的正确标签时遇到了问题。

我的数据范围是多年的，并且是一年中每个月的平均温度。根据你想要数据的位置，可能只有2-3年的数据，也可能有30-40年的数据。数据越多，X轴上的标签就会相互融合，使其无法读取。我如何才能只显示标签的一部分？

我试过使用像这样的回调函数。

const response = await fetch('/get_specific_station_data', options);
const data = await response.json(); 

var ctx = document.getElementById('myChart' + marker_id).getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: data.labels,
        datasets: [{
            label: data.title,
            data: data.data,
            borderWidth: 1,
            spanGaps: true
        }]
    },
    options: {
        scales: {
            xAxes: [{
                ticks: {
                    userCallback: function(item, index) {
                        let parts = item.split(" ");
                        if(parts[0] === "Januar" || parts[0] === "Juni") {
                            console.log(item);
                            return item;
                        }
                    },
                    autoSkip: true
                }
            }]
        }
    }
});

但由于某些原因，这个函数只能显示从一月开始的所有标签 而六月的标签就看不到了。控制台记录该项目时，虽然显示六月在那里。

标签可以是这样的。

['Januar 2014',    'Februar 2014', 'März 2014',     'April 2014',
'Mai 2014',       'Juni 2014',    'Juli 2014',     'August 2014',
'September 2014', 'Oktober 2014', 'November 2014', 'Dezember 2014',
'Januar 2015',    'Februar 2015', 'März 2015',     'April 2015',
'Mai 2015',       'Juni 2015',    'Juli 2015',     'August 2015',
'September 2015', 'Oktober 2015', 'November 2015', 'Dezember 2015',
'Januar 2016',    'Februar 2016', 'März 2016',     'April 2016',
'Mai 2016',       'Juni 2016',    'Juli 2016',     'August 2016',
'September 2016', 'Oktober 2016', 'November 2016', 'Dezember 2016',
'Januar 2017',    'Februar 2017', 'März 2017',     'April 2017',
'Mai 2017',       'Juni 2017',    'Juli 2017',     'August 2017',
'September 2017', 'Oktober 2017', 'November 2017', 'Dezember 2017',
'Januar 2018',    'Februar 2018', 'März 2018',     'April 2018',
'Mai 2018',       'Juni 2018',    'Juli 2018',     'August 2018',
'September 2018', 'Oktober 2018', 'November 2018', 'Dezember 2018',
'Januar 2019',    'Februar 2019', 'März 2019',     'April 2019',
'Mai 2019',       'Juni 2019',    'Juli 2019',     'August 2019',
'September 2019', 'Oktober 2019', 'November 2019', 'Dezember 2019',
'Januar 2020',    'Februar 2020', 'März 2020',     'April 2020',
'Mai 2020',       'Juni 2020',    'Juli 2020',     'August 2020',
'September 2020', 'Oktober 2020', 'November 2020', 'Dezember 2020']

而相应的数据可以是这样的

[13.1, 11.9, 18.5, 19.8, 25.7, 25.2, 34.6, 28.7, 23.3,
21,   17,   11.5, 11.4, 9.3,  11.5, 14.7, 22.1, 28.4,
31.7, 27.6, 19.6, 17.3, 17.7, 15.3, 13.7, 11.4, 14,
15.8, 25.7, 23.8, 32.5, 30,   29.6, 18.7, 14.3, 10.8,
9.4,  12.1, null, 17.4, 31,   27.5, 31.1, 24.5, 22.5,
23.6, 14.9, 10.9, 12.7, 8.3,  14.3, 27.3, 26.3, 25.7,
34.5, 30.1, 22,   25.1, 16.3, 12,   10.1, 16.2, 14,
24.9, 18.1, 31.4, 34.8, 30.4, 24.8, 18.7, 14.1, 12.2,
12.4, 13.1, 11.6, null, null, null, null, null, null,
null, null, null]

Answer 1

你可以定义显示在X轴上的最大刻度线和网格线的数量。xAxis 使用选项 ticks.maxTicksLimit.

scales: {
  xAxes: [{
    ticks: {
      maxTicksLimit: 8
    }
  }]