Chart.js-xAxes不适合我的图表吗？

Question

我正在尝试获取一些图表来显示过去一周的天气数据。

我设法使它们的外观和行为符合我的期望，但是xAxes标签似乎不能全部容纳在一行中，我可以使用一些帮助。

图表中的数据是每隔6小时的MySQL数据，因此过去一周我有28个数据点。

但是在xAxes标签中，我只想显示“ mon”，“ tue”，“ wed”等，因此我通过在此处和此处添加一些空的标签来解决该问题，但是我无法使其正常运行仍然。

这是图表现在的样子：

这是我的代码：

<script>
// This script sets the Humidity graph for showing the past 7 days area chart
var ct2 = document.getElementById("Humidity");
ct2.width = 330;
ct2.height = 100;
var myHumChart = new Chart(ct2, {
    type: 'line',
    data: {
        labels: ["", "", "<?php echo $day7; ?>", "", "", "", "<?php echo $day6; ?>", "",  "", "", "<?php echo $day5; ?>", "", "", "", "<?php echo $day4; ?>", "", "", "", "<?php echo $day3; ?>", "", "", "", "<?php echo $day2; ?>", "", "", "", "<?php echo $today; ?>", ""],
        datasets: [{
            data: [<?php echo $result28_array[1]; ?>, <?php echo $result27_array[1]; ?>, <?php echo $result26_array[1]; ?>, <?php echo $result25_array[1]; ?>, <?php echo $result24_array[1]; ?>, <?php echo $result23_array[1]; ?>, <?php echo $result22_array[1]; ?>, <?php echo $result21_array[1]; ?>, <?php echo $result20_array[1]; ?>, <?php echo $result19_array[1]; ?>, <?php echo $result18_array[1]; ?>, <?php echo $result17_array[1]; ?>, <?php echo $result16_array[1]; ?>, <?php echo $result15_array[1]; ?>, <?php echo $result14_array[1]; ?>, <?php echo $result13_array[1]; ?>, <?php echo $result12_array[1]; ?>, <?php echo $result11_array[1]; ?>, <?php echo $result10_array[1]; ?>, <?php echo $result9_array[1]; ?>, <?php echo $result8_array[1]; ?>, <?php echo $result7_array[1]; ?>, <?php echo $result6_array[1]; ?>, <?php echo $result5_array[1]; ?>, <?php echo $result4_array[1]; ?>, <?php echo $result3_array[1]; ?>, <?php echo $result2_array[1]; ?>, <?php echo $result1_array[1]; ?>],
            backgroundColor: [
                'rgba(88, 82, 57, 1)'
            ],
            borderColor: [
                'rgba(241,224,148,1)'
            ],
            borderWidth: 2
        }]
    },
    options: {
        scales: {
            xAxes: [{
                ticks: {
                    fontColor: '#bebcbc',
                    fontSize: 12,
                    maxRotation: 0,
                    minRotation: 0
                },
                gridLines: {
                    display:false,
                    tickMarkLength: 2
                }
            }],
            yAxes: [{
                ticks: {
                    beginAtZero:true,
                    suggestedMin: 20,
                    suggestedMax: 50,
                    fontColor: '#bebcbc',
                    fontSize: 12
                },
                gridLines: {
                    display:false
                }
            }]
        },
        legend: {
            display: false
                },
     tooltips: {
        enabled: false
     },
     elements: { point: { radius: 0 } },
     animation: {
             duration: 0
         }
    }
});
</script>

希望有人对如何实现这一目标有所了解？

我仍然想保持标签水平，因此我需要保持minRotation和maxRotation设置。