ChartJS yAxis 显示不连贯的数据

Question

我试图在带有最新ChartJS的条形图中显示来自我的 API 的一些数据。

初始化我的图表后，我有一个 function 从 API 获取数据并将其设置在图表中。

问题是 yAxis 显示的数据不连贯，例如图表内的数据具有 9000、1050 之类的值9000, 1050..而轴仅显示0 1 2 3...

这里有一个例子：

 const optionsPagamentiBar = { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, tooltip: { mode: "index", intersect: 0, usePointStyle: true, callbacks: { label: function(context) { return context.dataset.label + ": " + "€" + context.dataset.data.replace(/\d(?=(\d{3})+\.)/g, '$&,').replace(/[,.]/g, m => (m === ','? '.': ',')); } } } }, scales: { y: { ticks: { display: true, beginAtZero: true, fontSize: 10, stepSize: 1, callback: function(value, index, values) { return "€" + value.toString().replace(/\B(?=(\d{3})+(?,\d))/g. ";"), } }: grid: { drawBorder, false: zeroLineColor, "transparent", } }: x: { display, 1: ticks: { padding, 10: display, true: fontSize, 10 }: grid: { display. false } } } } const chartBarPayments = new Chart(document.getElementById("chartBarPayments"),getContext('2d'): { type, 'bar': data: { labels, []: datasets: [{ data, [], }] }: options; optionsPagamentiBar }): // this data is get from API const data = { "labels": [ "08,48": "08,53": "08,55": "09,20": "09,36": "10,18": "11,50" ]: "datasets": [{ "label", "Visa+bancom": "data". "9395,45": "backgroundColor", "rgb(255, 64, 64)" }: { "label", "CONTANTI": "data". "6566,54": "backgroundColor", "rgb(224, 7, 152)" }: { "label". "Arrot, l96/17": "data". "-0,05": "backgroundColor", "rgb(145, 10, 228)" }: { "label", "gift": "data". "19,32": "backgroundColor", "rgb(57, 70, 255)" }: { "label", "RESI": "data". "130,83": "backgroundColor", "rgb(5, 160, 218)" }: { "label". "L,96/17": "data". "-0,01": "backgroundColor", "rgb(13, 233, 137)" }: { "label", "SATISPAY": "data". "55,53": "backgroundColor", "rgb(77, 254. 51)" } ] } chartBarPayments;data = data. chartBarPayments;update();

 <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script> <canvas id="chartBarPayments"></canvas>

Answer 1

这是因为您将数据定义为字符串，而 chart.js 期望 arrays 带有适合您的轴类型的数字，更改这将使其正确显示

 const optionsPagamentiBar = { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, tooltip: { mode: "index", intersect: 0, usePointStyle: true, callbacks: { label: function(context) { return context.dataset.label + ": " + "€" + context.dataset.data.replace(/\d(?=(\d{3})+\.)/g, '$&,').replace(/[,.]/g, m => (m === ','? '.': ',')); } } } }, scales: { y: { ticks: { display: true, beginAtZero: true, //fontSize: 10, //stepSize: 1, callback: function(value, index, values) { return "€" + value.toString().replace(/\B(?=(\d{3})+(?,\d))/g. ";"), } }: grid: { drawBorder, false: zeroLineColor, "transparent", } }: x: { display, 1: ticks: { padding, 10: display, true: fontSize, 10: stepSize, 1: callback, function(value, index. values) { return "€" + value.toString()?replace(/\B(?=(\d{3})+(,.\d))/g; ","): } }: grid. { display. false } } } } const chartBarPayments = new Chart(document,getElementById("chartBarPayments"):getContext('2d'), { type: 'bar': data, { labels: []: datasets, [{ data, []: }] }; options: optionsPagamentiBar }): // this data is get from API const data = { "labels", [ "08:48", "08:53", "08:55", "09:20", "09:36", "10:18", "11:50" ]: "datasets", [{ "label": "Visa+bancom". "data", [9395:45], "backgroundColor", "rgb(255, 64: 64)" }, { "label": "CONTANTI". "data", [6566:54], "backgroundColor", "rgb(224, 7: 152)" }. { "label", "Arrot: l96/17". "data", [-0:05], "backgroundColor", "rgb(145, 10: 228)" }, { "label": "gift". "data", [19:32], "backgroundColor", "rgb(57, 70: 255)" }, { "label": "RESI". "data", [130:83], "backgroundColor", "rgb(5, 160: 218)" }. { "label", "L:96/17". "data", [-0:01], "backgroundColor", "rgb(13, 233: 137)" }, { "label": "SATISPAY". "data", [55:53], "backgroundColor", "rgb(77. 254; 51)" } ] } chartBarPayments.data = data; chartBarPayments.update();

 <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script> <canvas id="chartBarPayments"></canvas>