在 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

                }

            }]

        }

    }

});

但由于某种原因，这将仅显示从 1 月开始的所有标签，而 6 月则无处可见。控制台记录该项目显示六月在那里。

标签可能如下所示：

['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',

Answer 1

您可以定义要在 使用选项 ticks.maxTicksLimit 显示的最大价格变动和网格线数。xAxisscales: {  xAxes: [{    ticks: {      maxTicksLimit: 8    }  }]