ChartJS 折线图编辑 y 轴标签

Question

试图让 ChartJS 中的折线图按照我们客户的意愿工作，但我遇到了一个问题：当整周的数据（我们做销售）为 0 时，yAxis 上绘制的标签如下0 - 这是我们的客户不想要的。我查看了 scaleoverride、suggestedMin 和 beginAtZero，但都没有奏效。

如何更改标签，使其始终至少为 0？

下面的免费图片，以可视化问题：

代码（使用我尝试过的一种不起作用的方法）：

var canvas = document.getElementById('salesChart').getContext('2d');
salesChart = new Chart(canvas, {
    type: 'line',
    scaleOverride: true,
    scaleSteps: 10,
    scaleStepWidth: 20,
    scaleStartValue: 0,
    data: {
        labels: chartLabels,
        datasets: [{
            label: 'Sales',
            data: chartData,
            backgroundColor: "rgba(37,185,153,0.7)"
        }],
    },
    options: {
        maintainAspectRatio: false,
        responsive: true
    }
});

Answer 1

这对我有用：

options: {
    maintainAspectRatio: false,
    responsive: true,
     scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    }
}

注意：我保留了图表配置的其余部分。您没有明确提供 chartLabels 和 chartData 变量，所以我使用了：

var chartLabels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
var chartData = [0, 0, 0, 0, 0, 0, 0];

小提琴：https://jsfiddle.net/3c4yq5oq/