Charts ChartJs:X轴标签在底部切割

我正在创建垂直x轴标签，但标签在移动设备底部被切掉：

我的代码如下：

window.chartColors = {
    red: 'rgb(255, 99, 132)',
    orange: 'rgb(255, 159, 64)',
    yellow: 'rgb(255, 205, 86)',
    green: 'rgb(51, 204, 51)',
    blue: 'rgb(54, 162, 235)',
    purple: 'rgb(153, 102, 255)',
    grey: 'rgb(201, 203, 207)'
};


var options2 = {
type: 'line',
data: {
    labels: ["02/07/2020 8:01", "02/07/2020 13:00", "02/07/2020 17:00", "02/07/2020 22:00", "02/08/2020 8:01", "02/08/2020 13:01", "02/08/2020 17:00", "02/08/2020 22:00", "02/09/2020 8:01", "02/09/2020 13:00", "02/09/2020 17:00", "02/09/2020 22:00"],
    datasets: [
        {
            label: 'Water Level',
            data: [13.534,13.652,13.298,13.062,11.763,13.613,13.534,12.629,11.369,13.495,13.574,13.456],
            borderWidth: 1,
            lineTension: 0,
            fill: false,
            backgroundColor: window.chartColors.blue,
            borderColor: window.chartColors.blue,
        }
    ],
    scales: {
      xAxes: [{
        ticks: {
          beginAtZero: false
        }
      }]
    }
},
options: {
    legend: {
        position: 'bottom',
        display: false
    },
    responsive: true,
    bezierCurve: false,
    scales: {
        xAxes: [{
            ticks: {
                autoSkip: true,
                maxRotation: 90,
                minRotation: 90
            }
        }],
        yAxes: [{
            ticks: {
              min: 0,
              max: 36,
              stepSize: 10
            },
            scaleLabel: {
              display: true,
              labelString: 'inches'
            }
        }]
    },
    backgroundRules: [{
        backgroundColor: window.chartColors.green,
        yAxisSegement: 6
    }, {
        backgroundColor: window.chartColors.grey,
        yAxisSegement: 12
    }, {
        backgroundColor: window.chartColors.red,
        yAxisSegement: 999999
    }]
},
plugins: [{
    beforeDraw: function (chart) {
        var rules = chart.chart.options.backgroundRules;
        var ctx = chart.chart.ctx;
        var yAxis = chart.chart.scales["y-axis-0"];
        var xaxis = chart.chart.scales["x-axis-0"];
        for (var i = 0; i < rules.length; ++i) {
            var yAxisSegement = (rules[i].yAxisSegement > yAxis.ticksAsNumbers[0] ? yAxis.ticksAsNumbers[0] : rules[i].yAxisSegement);
            var yAxisPosStart = yAxis.height - ((yAxisSegement * yAxis.height) / yAxis.ticksAsNumbers[0]) + chart.chart.controller.chartArea.top;
            var yAxisPosEnd = (i === 0 ? yAxis.height : yAxis.height - ((rules[i - 1].yAxisSegement * yAxis.height) / yAxis.ticksAsNumbers[0]));
            ctx.fillStyle = rules[i].backgroundColor;
            ctx.fillRect(xaxis.left, yAxisPosStart, xaxis.width, yAxisPosEnd - yAxisPosStart + chart.chart.controller.chartArea.top);
        }
    }
}]
};

var ctx2 = document.getElementById('chart2').getContext('2d');
var chart2 = new Chart(ctx2, options2);

window.chartColors={
红色：“rgb（255，99，132）”，
橙色：“rgb（25515964）”，
黄色：“rgb（25520586）”，
绿色：“rgb（51204，51）”，
蓝色：“rgb（54162235）”，
紫色：“rgb（153102255）”，
灰色：“rgb（201203207）”
};
var选项2={
键入：“行”，
数据：{
标签：[“02/07/2020 8:01”、“02/07/2020 13:00”、“02/07/2020 17:00”、“02/07/2020 22:00”、“02/08/2020 8:01”、“02/08/2020 13:01”、“02/08/2020 17:00”、“02/08/2020 22:00”、“02/09/2020 8:01”、“02/09/2020 13:00”、“02/09/2020 22:00”]，
数据集：[
{
标签：“水位”，
数据：[13.534,13.652,13.298,13.062,11.763,13.613,13.534,12.629,11.369,13.495,13.574,13.456]，
边框宽度：1，
线张力：0，
填充：假，
背景颜色：window.chartColors.blue，
边框颜色：window.chartColors.blue，
}
],
比例：{
xAxes：[{
滴答声：{
贝吉纳泽罗：错
}
}]
}
},
选项：{
图例：{
位置：'底部'，
显示：假
},
回答：是的，
贝塞尔曲线：错，
比例：{
xAxes：[{
滴答声：{
autoSkip：是的，
最大旋转：90，
平均轮换次数：90
}
}],
雅克斯：[{
滴答声：{
分:0,，
最高：36，
步长：10
},
scaleLabel：{
显示：对，
标签字符串：“英寸”
}
}]
},
背景规则：[{
背景颜色：window.chartColors.green，
雅克西赛段：6
}, {
背景颜色：window.chartColors.gray，
雅克西分区：12
}, {
背景颜色：window.chartColors.red，
雅西区：999999
}]
},
插件：[{
绘制前：函数（图表）{
var规则=chart.chart.options.backgroundRules；
var ctx=chart.chart.ctx；
var yAxis=图表.图表.刻度[“y轴-0”]；
var xaxis=图表.图表.刻度[“x轴-0”]；
对于（变量i=0；iyAxis.ticksAsNumbers[0]？yAxis.ticksAsNumbers[0]：规则[i].yaxissegment）；
var yAxisPosStart=yAxis.height-（（yaxissegment*yAxis.height）/yAxis.ticksAsNumbers[0]）+chart.chart.controller.chartArea.top；
变量yAxisPosEnd=（i==0？yAxis.height:yAxis.height-（（规则[i-1].yaxissegment*yAxis.height）/yAxis.ticksambers[0]）；
ctx.fillStyle=rules[i].背景色；
ctx.fillRect（xaxis.left、yAxisPosStart、xaxis.width、yAxisPosEnd-yAxisPosStart+chart.chart.controller.chartArea.top）；
}
}
}]
};
var ctx2=document.getElementById（'chart2'）.getContext（'2d'）；
var chart2=新图表（ctx2，选项2）；

小提琴：

帮助

更新
要在firefox中复制，请按CTRL+shift+m

---

如果将此选项添加到图表选项中，将解决以下问题：

maintainAspectRatio: false,

完整脚本（在第40行添加代码）：

window.chartColors={
红色：“rgb（255，99，132）”，
橙色：“rgb（25515964）”，
黄色：“rgb（25520586）”，
绿色：“rgb（51204，51）”，
蓝色：“rgb（54162235）”，
紫色：“rgb（153102255）”，
灰色：“rgb（201203207）”
};
var选项2={
键入：“行”，
数据：{
标签：[“02/07/2020 8:01”、“02/07/2020 13:00”、“02/07/2020 17:00”、“02/07/2020 22:00”、“02/08/2020 8:01”、“02/08/2020 13:01”、“02/08/2020 17:00”、“02/08/2020 22:00”、“02/09/2020 8:01”、“02/09/2020 13:00”、“02/09/2020 22:00”]，
数据集：[
{
标签：“水位”，
数据：[13.534,13.652,13.298,13.062,11.763,13.613,13.534,12.629,11.369,13.495,13.574,13.456]，
边框宽度：1，
线张力：0，
填充：假，
背景颜色：window.chartColors.blue，
边框颜色：window.chartColors.blue，
}
],
比例：{
xAxes：[{
滴答声：{
贝吉纳泽罗：错
}
}]
}
},
选项：{
图例：{
位置：'底部'，
显示：假
},
MaintaintAspectratio:false，//您的小提琴使用的是Chart.js 2.3.0。最新发布的版本是2.9.3。尝试使用最新版本，因为axis渲染代码有很多改进。更新的版本仍然存在相同的问题