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

Charts ChartJs:X轴标签在底部切割,charts,chart.js,Charts,Chart.js,我正在创建垂直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)',

我正在创建垂直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渲染代码有很多改进。更新的版本仍然存在相同的问题