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月开始的所有标签。控制台记录该项目表明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',
'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

您可以使用选项ticks.maxTicksLimit定义要在xAxis上显示的最大刻度线和网格线。

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

在x轴上显示第n个标签

1 个答案: