图表 chart.js 中未显示最小和最大标签

Question

chart.js 的 min 和 max 属性在图表中不起作用，但 min 和 max 语句旁边的 function 工作正常 我检查了所有网站和所有问题，但找不到解决方案。请帮助

const ctx = document.getElementById("myChart").getContext("2d");
let gradient = ctx.createLinearGradient(0,25,0,300);
gradient.addColorStop(0, "rgba(149, 76, 233, 0.5)");
gradient.addColorStop(0.35, "rgba(149, 76, 233, 0.25)");
gradient.addColorStop(1, "rgba(149, 76, 233, 0)");
const revenue = [30.0, 38.2, 45.1, 52.4, 58.9, 65.2, 69.8, 71.6, 75.6, 82.2];
const labels = [
  "2010",
  "2011",
  "2012",
  "2013",
  "2014",
  "2015",
  "2016",
  "2017",
  "2018",
  "2019",
  "2020",
  "2021",
  "2022",
];
const data = {
    labels,
    datasets: [
        {
            data: revenue,
            label: "Annual Revenue",
            fill: true, 
            backgroundColor: gradient,
            borderColor: "rgba(149, 76, 233, 1)",
            lineTension: 0.2,
            pointRadius: 3,
            borderWidth: 2,
        },
    ],
};
const config = {
    type: 'line',
    data: data,
    options: {
        resposive: true,
        scales: {
            y:{
                grindLines:{
                    color: "rgba(149, 76, 233, 1)"
                },
                ticks:{
                    beginAtZero: false,
                    max : "10",
                    min : "100",
                    callback: function (value){
                        return "$" + value + "k";
                    },
                },
            },
        },
    },
};
const myChart = new Chart(ctx, config);

Answer 1

对于 Chart.js 版本 3， min和max是number类型，它们不再在ticks选项内定义，而是直接在scale内定义，如下所示：

scales: {
  y: { 
    min: 10,
    max: 100
  } 
  ...

我还注意到在您的代码中， min大于max ，这可能需要更正。

请在此处查看 Chart.js 文档。