ChartJS折线图编辑y轴标签

Question

尝试在 ChartJS 中根据客户的意愿制作折线图，但我运行遇到了一个问题：当一整周的数据（我们进行销售）为 0 时，标签绘制在 yAxis 上低于 0 - 这是我们的客户不想要的。我查看了 scaleoverride、suggestedMin 和 beginAtZero，但 none 有效。

如何更改标签，使其始终至少为 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];

Fiddle: https://jsfiddle.net/3c4yq5oq/

ChartJS折线图编辑y轴标签

ChartJS linechart edit yAxis labels

linechart

chart.js