Igo*_*yuk 6 javascript chart.js
我的图表 y 标签被切断，尝试在 stackoverflow 上找到的不同解决方案（例如在标签中添加空格或设置布局填充）并没有解决问题。
\n代码
\nconst optionsTotali = {\n maintainAspectRatio: false,\n responsive: true,\n plugins: {\n legend: {\n display: false\n },\n tooltip: {\n displayColors: false,\n mode: "index",\n intersect: 0,\n callbacks: {\n label: function(context) {\n return "\xe2\x82\xac" + context.parsed.y.toFixed(2).replace(/\\d(?=(\\d{3})+\\.)/g, \'$&,\').replace(/[,.]/g, m => (m === \',\' ? \'.\' : \',\'));\n }\n }\n },\n },\n scales: {\n y: {\n grid: {\n display: false\n },\n ticks: {\n min: 0,\n beginAtZero: true,\n sampleSize: 1,\n callback: function(value, index, values) {\n return "\xe2\x82\xac" + value.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ".");\n }\n }\n }\n }\n};\n\nconst ctx = document.getElementById("chartTotali").getContext(\'2d\');\nconst chartTotali = new Chart(ctx, {\n type: \'line\',\n data: {\n labels: [\n "08:00",\n "09:00",\n "10:00",\n "11:00",\n "12:00",\n "13:00",\n "14:00",\n "15:00",\n "16:00",\n "17:00",\n "18:00",\n "19:00",\n "20:00"\n ],\n datasets: [{\n label: "Totale \xe2\x82\xac",\n fill: true,\n backgroundColor: \'#0084ff\',\n borderColor: \'#0084ff\',\n borderWidth: 2,\n pointBackgroundColor: \'#0084ff\',\n data: [\n "17089.36",\n "394279.52",\n "514863.02",\n "540198.74",\n "379222.06",\n "8793.42",\n "79.58",\n "116379.41",\n "444580.43",\n "506663.36",\n "457947.28",\n "138158.94",\n "398.46"\n ],\n }]\n },\n options: optionsTotali\n});.card-chart {\n overflow: hidden;\n}\n\n.card {\n display: flex;\n flex-direction: column;\n min-width: 0;\n word-wrap: break-word;\n background-color: #fff;\n background-clip: border-box;\n border: 0.0625rem solid rgba(34, 42, 66, .05);\n border-radius: 0.2857rem;\n}\n\n.card {\n background: #27293d;\n border: 0;\n position: relative;\n width: 100%;\n margin-bottom: 30px;\n box-shadow: 0 1px 20px 0 rgb(0 0 0 / 10%);\n}\n\n.card .card-body {\n padding: 15px 15px 15px 15px;\n}\n\n.card-body {\n flex: 1 1 auto;\n padding: 1.5rem;\n}\n\n.card-chart .chart-area {\n height: 220px;\n width: calc(100% + 30px);\n}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">\n<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>\n<div class="card card-chart">\n <div class="card-header">\n <div class="row">\n <div class="col-sm-6 text-left">\n <h5 class="card-category">Totale vendite</h5>\n <h2 class="card-title">Totali</h2>\n </div>\n </div>\n </div>\n <div class="card-body">\n <div class="chart-area">\n <canvas id="chartTotali" width="1563" height="220" style="display: block; box-sizing: border-box; height: 220px; width: 1563px;"></canvas>\n </div>\n </div>\n</div>y 轴配置中的属性sampleSize是罪魁祸首，因为您将其放入其中1仅查看第一个刻度以了解它可以使用的长度。但数组中的其他数据要大得多，因此无法容纳。删除此属性或将其设置为更大的数字，以便采样更多刻度将解决您的行为（删除将给出最一致的结果）。
const optionsTotali = {\n maintainAspectRatio: false,\n responsive: true,\n plugins: {\n legend: {\n display: false\n },\n tooltip: {\n displayColors: false,\n mode: "index",\n intersect: 0,\n callbacks: {\n label: function(context) {\n return "\xe2\x82\xac" + context.parsed.y.toFixed(2).replace(/\\d(?=(\\d{3})+\\.)/g, \'$&,\').replace(/[,.]/g, m => (m === \',\' ? \'.\' : \',\'));\n }\n }\n },\n },\n scales: {\n y: {\n grid: {\n display: false\n },\n ticks: {\n min: 0,\n beginAtZero: true,\n callback: function(value, index, values) {\n return "\xe2\x82\xac" + value.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ".");\n }\n }\n }\n }\n};\n\nconst ctx = document.getElementById("chartTotali").getContext(\'2d\');\nconst chartTotali = new Chart(ctx, {\n type: \'line\',\n data: {\n labels: [\n "08:00",\n "09:00",\n "10:00",\n "11:00",\n "12:00",\n "13:00",\n "14:00",\n "15:00",\n "16:00",\n "17:00",\n "18:00",\n "19:00",\n "20:00"\n ],\n datasets: [{\n label: "Totale \xe2\x82\xac",\n fill: true,\n backgroundColor: \'#0084ff\',\n borderColor: \'#0084ff\',\n borderWidth: 2,\n pointBackgroundColor: \'#0084ff\',\n data: [\n "17089.36",\n "394279.52",\n "514863.02",\n "540198.74",\n "379222.06",\n "8793.42",\n "79.58",\n "116379.41",\n "444580.43",\n "506663.36",\n "457947.28",\n "138158.94",\n "398.46"\n ],\n }]\n },\n options: optionsTotali\n});.card-chart {\n overflow: hidden;\n}\n\n.card {\n display: flex;\n flex-direction: column;\n min-width: 0;\n word-wrap: break-word;\n background-color: #fff;\n background-clip: border-box;\n border: 0.0625rem solid rgba(34, 42, 66, .05);\n border-radius: 0.2857rem;\n}\n\n.card {\n background: #27293d;\n border: 0;\n position: relative;\n width: 100%;\n margin-bottom: 30px;\n box-shadow: 0 1px 20px 0 rgb(0 0 0 / 10%);\n}\n\n.card .card-body {\n padding: 15px 15px 15px 15px;\n}\n\n.card-body {\n flex: 1 1 auto;\n padding: 1.5rem;\n}\n\n.card-chart .chart-area {\n height: 220px;\n width: calc(100% + 30px);\n}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">\n<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>\n<div class="card card-chart">\n <div class="card-header">\n <div class="row">\n <div class="col-sm-6 text-left">\n <h5 class="card-category">Totale vendite</h5>\n <h2 class="card-title">Totali</h2>\n </div>\n </div>\n </div>\n <div class="card-body">\n <div class="chart-area">\n <canvas id="chartTotali" width="1563" height="220" style="display: block; box-sizing: border-box; height: 220px; width: 1563px;"></canvas>\n </div>\n </div>\n</div>