Graph.js 不应用我的选项设置

Question

我尝试过使用很多建议的东西，但没有任何效果
我试图从 0 开始 y 轴，但如果只有一个数据（一个标签和一个数据），它会在轴上给出从 -1 到 1 的值，这是我试图避免的。如果有多个数据仍然不是从0开始

下面是我使用的jsDelivr

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>

我也尝试过以下 CDN，但没有成功

https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.min.js

我的前端是在 ejs 中

下面是我用来创建和操作图表的函数

function updateChart(lables, data, id, datasetLbl) {
    let date = moment();
    date = date.format('YYYY/MM/DD');

    const ctx = document.getElementById(id).getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: lables.length < 1 ? [date] : lables, // Assuming each data point has a label
            datasets: [
                {
                    label: datasetLbl,
                    data: !data.length ? [0] : data, // Assuming each data point has a value
                    borderColor: 'rgb(75, 192, 192)',
                    tension: 0.1,
                },
            ]   ,
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true,
                    suggestedMin: 0,
                    stepSize: 1
                },
                x: {
                    display: true,
                },
            },
        },
    });
}

我尝试过很多事情

options: {
            scales: {
                y: {
                    beginAtZero: true,
                    // min: 0,
                    //suggestedMin: 0,
                    ticks:{
                        //here also I have tried to define suggestedMin and min but did not work
                    },
                },
                x: {
                    display: true,
                },
            },
        },

没有任何东西影响步长不最小每个选项对我的图表没有影响

不知道如何解决

Answer 1

当只有一个数据点时。

确保您的数据数组包含有效的数值。如果只有一个数据点且不为 0，图表可能会根据该单个值调整 y 轴范围。

enter code here

函数 updateChart（标签，数据，id，数据集标签）{

console.log("Labels:", labels);
console.log("Data:", data);


const ctx = document.getElementById(id).getContext('2d');
new Chart(ctx, {
    type: 'line',
    data: {
        labels: labels.length < 1 ? [moment().format('YYYY/MM/DD')] : labels,
        datasets: [
            {
                label: datasetLabel,
                data: data.length < 1 ? [0] : data,
                borderColor: 'rgb(75, 192, 192)',
                tension: 0.1,
            },
        ],
    },
    options: {
        scales: {
            y: {
                beginAtZero: true,
                // Other options like min or suggestedMin can be added here
            },
            x: {
                display: true,
            },
        },
    },
});

}

通过记录标签和数据数组，您可以验证它们是否包含预期值。另外，检查是否有其他冲突的配置或影响图表渲染的外部因素。

您还可以创建一个最小的可重现示例（例如 CodePen 或 JSFiddle）来演示问题 祝你好运