Chart JS 刻度选项不适用于 y 轴

Question

我一直在努力制作一个 chart.js 折线图，当所有值都为 0 时从 0 开始。如果数据集的所有数据都是 0，则 y 轴将始终显示低于 0 的值我不要那里。

示例如下：

<div class="container">
    <canvas id="lineChart"></canvas>
    <script>
        var ctx = document.getElementById('lineChart');
        var lineChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [1,2,3],
                datasets: [{
                    data: [0, 0, 0]
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        ticks: {
                            beginAtZero:true
                        }
                    }
                }
            }
        });
    </script>
<div>

如您所见，我正在按照文档 here 中的建议更改比例选项（显然已经进行了迁移，这是我正在使用的 v3 中的方法）。但是图形仍然不会从 0 开始：

除了刻度之外的任何轴选项都可以正常工作。关于我可能做错了什么的任何想法？

Answer 1

您尝试将 beginAtZero 放在 V2 位置，在 V3 中您必须将它放在比例对象的根目录中，如下所示：

const options = {
  type: 'line',
  data: {
    labels: [1, 2, 3],
    datasets: [{
      label: '# of Votes',
      data: [0, 0, 0],
      borderColor: 'pink'
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
</body>

对于 V2 和 V3 之间的所有变化，您可以阅读 migration guide

Chart JS 刻度选项不适用于 y 轴

Chart JS tick options not working for y axis

javascript

chart.js