chart.js 如何强制最小和最大 y 轴值

Question

我在页面上有一个 chart.js 并且正在努力设置 Y 轴上的最小值和最大值，这些是设置的选项：

var areaChartOptions = {
      
      showScale               : true,
      scaleShowGridLines      : false,
      scaleGridLineColor      : 'rgba(0,0,0,.05)',
      scaleGridLineWidth      : 1,
      scaleShowHorizontalLines: true,
      scaleShowVerticalLines  : true,
      bezierCurve             : true,
      bezierCurveTension      : 0.3,
      pointDot                : false,
      pointDotRadius          : 4,
      pointDotStrokeWidth     : 1,
      pointHitDetectionRadius : 20,
      datasetStroke           : true,
      datasetStrokeWidth      : 2,
      datasetFill             : true,
      legendTemplate          : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].lineColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>',
      //Boolean -  to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
      maintainAspectRatio     : true,
      responsive              : true,
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    suggestedMin: 0,
                    suggestedMax: 100
                }
            }]
        }
    }

但它既不是从零开始的，也不符合 suggestedMin 或 suggestedMax

这里好像设置了yAxes:

datasets: [
        {
          yAxisID             : 'yAxes',
          label               : 'Listeners',
          fillColor           : 'rgba(0, 166, 90,1)',
          strokeColor         : 'rgba(0, 166, 90,1)',
          pointColor          : 'rgba(0, 166, 90,1)',
          pointStrokeColor    : '#00a65a',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(0, 166, 90,1)',
          data                :

我想做的是强制图表 Y 轴具有我自己设置的值（在此示例中，0 为最小值，100 为最大值）。

提前致谢。

Answer 1

我想您使用的是 Chart.js 版本 3.

根据3.x Migration Guide，自v2.

以来进行了以下相关更改

scales.[x/y]Axes.ticks.beginAtZero 已重命名为 scales[id].beginAtZero
scales.[x/y]Axes.ticks.max 已重命名为 scales[id].max
scales.[x/y]Axes.ticks.min 已重命名为 scales[id].min
scales.[x/y]Axes.ticks.suggestedMax 已重命名为 scales[id].suggestedMax
scales.[x/y]Axes.ticks.suggestedMin 已重命名为 scales[id].suggestedMin

因此，而不是...

scales: {
  yAxes: [{
    ticks: {
      beginAtZero: true,
      suggestedMax: 100
    }
  }
}

...您现在必须定义：

scales: {
  y: {
    beginAtZero: true,
    suggestedMax: 100
  }
}

chart.js 如何强制最小和最大 y 轴值

chart.js how to force min and max y axis values

chart.js