我需要帮助，因为我的图表出现问题
我正在使用chartjs-node-canva，这是chartjs的一个版本，可以在nodejs中使用，作为从后端使用库的一种简单方法。
到目前为止一切顺利，我的问题是，当我第一次加载模板时，我为图表配置的样式显示为我所期望的样式，

但当我刷新页面时，问题就从这里开始了，因为所有内容都不同步。

我真的不知道发生了什么，为什么会这样，有人知道我如何解决这个问题吗？
提前表示感谢，任何形式的帮助都将不胜感激，祝您有一个非常愉快的一天。

代码

const canvasRenderService = new ChartJSNodeCanvas({
            width: 860,
            height: 539,
            chartCallback: (ChartJS) => {
                ChartJS.register(require('chartjs-plugin-datalabels'))
            }
        });

        const subLabels = {
            id: 'subLabels',
            afterDatasetsDraw(chart, args, pluginOptions) {
                const { ctx, chartArea: { left, right, top, bottom, width, height } } = chart;

                ctx.save();
                subLabelText('DEV', width / 4 * 1.6);
                subLabelText('SAC', width / 4 * 3.1);
                subLabelText('DESIGN', width / 4 * 3.9);

                function subLabelText(text, x) {
                    ctx.font = 'bold 12px sans-serif';
                    ctx.fillStyle = 'rgba(102, 102, 102, 1)';
                    ctx.textAlign = 'center';
                    ctx.fillText(text, x + left, bottom + 144);
                    let xAxis = chart.scales['x-axis-0'];
                    let xCenter = (xAxis.left + xAxis.right) / 1.45;
                    let yBottom = chart.scales['y-axis-0'].bottom;
                    ctx.strokeStyle = 'lightgray';
                    [xAxis.left, xCenter, xAxis.right].forEach(AxisX => {
                        ctx.beginPath();
                        ctx.moveTo(AxisX, yBottom);
                        ctx.lineTo(AxisX, yBottom + 110);
                        ctx.stroke();
                    });

                    ctx.beginPath();
                    ctx.strokeStyle = 'lightgray';
                    ctx.moveTo(width / 4 * 3.95, yBottom);
                    ctx.lineTo(width / 4 * 3.95, yBottom + 120);
                    ctx.stroke();

                    ctx.restore();
                }
            }
        }

        const mkChart = await canvasRenderService.renderToBuffer({
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    type: 'line',
                    label: '% ACTIVITY',
                    backgroundColor: '#FF7605',
                    borderColor: '#FF7605',
                    data: lineBar,
                    datalabels: {
                        anchor: 'start',
                        align: 'center',
                        clamp: true,
                        backgroundColor: '#FF7605',
                        color: 'white',
                        font: {
                            weight: 'bold'
                        }
                    }
                },
                {
                    type: 'bar',
                    label: 'WEEKLY SUMMARY OF HOURS',
                    backgroundColor: '#222A35',
                    borderColor: '#222A35',
                    data: barHorizontal,
                    datalabels: {
                        rotation: 270,
                        padding: 10,
                        anchor: 'start',
                        align: 'end'
                    },
                    barPercentage: 0.5
                },
                {
                    type: 'bar',
                    label: 'HOURS',
                    backgroundColor: '#008582',
                    borderColor: '#008582',
                    data: colbWeekly,
                    datalabels: {
                        anchor: 'end',
                        align: 'top',
                        clamp: true,
                        backgroundColor: '#008582',
                        color: 'white',
                        font: {
                            weight: 'bold'
                        }
                    },
                    barPercentage: 0.5
                }]
            },
            options: {
                plugins: {
                    datalabels: {
                        color: 'white',
                        font: {
                            weight: 'bold'
                        },
                    },
                    title: {
                        display: true,
                        text: 'AVERAGE WEEKLY HOURS'
                    },
                    legend: {
                        position: 'top',
                        labels: {
                            padding: 30,
                            usePointStyle: true
                        }
                    },
                },
                elements: {
                    line: {
                        fill: false
                    }
                },
                scales: {
                    'x-axis-0': {
                        stacked: true,
                        min: 0,
                        max: 80,
                        ticks: {
                            stepSize: 20,
                            minRotation: 90,
                        },
                        grid: {
                            display: false
                        },
                        // barPercentage: 0.2
                    },
                    'y-axis-0': {
                        grid: {
                            drawOnChartArea: true
                        }
                    }
                }
            },
            plugins: [subLabels]

        });

CSS格式

body {
  font-family: 'Poppins', sans-serif !important;
  min-height: 100%;
  font-size: 0.80rem !important;
}

html {
  height: 100%;
}

@page {
  margin: 10mm;
}

@media print {
  body {
    margin: 0;
  }
  html,
  body {
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
  }
}

.Logo {
  object-fit: contain;
}

演示版

第一个