chart.js - Chart.js 上的动态最大 y 轴值

Question

使用 Chart.js，有没有办法设置动态最大 y 轴值？

我有一个图表，其绝对最大值始终为 999。如果值较低（例如 50、100 或 200），y 轴自动缩放（最大刻度分别为 60、110 或 210例如）如预期的那样。

但是，如果其中一个数据点是 999，则 y 轴最大值变为 1000。如果我的图表中只有低值，是否有任何方法可以将 999 设置为 y 轴最大值而不强制此最大值为 999？我尝试在选项中使用maxofsuggestedMax失败。

Answer 1

最简单的方法是data在图表配置之外的变量中定义 ，然后使用Math.max()来定义scales.y.max。

scales: {
  y: {
    max: Math.max(...data)        
  },

请查看从Chart.js 文档派生的以下可运行代码，并了解它是如何工作的。

let data = [650, 595, 999, 815, 56, 155, 440];

new Chart('myChart', {
  type: 'line',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'My First Dataset',
      data: data,
      fill: false,
      borderColor: 'rgb(75, 192, 192)',
      lineTension: 0.1
    }]
  },
  options: {
    responsive: true,
    plugins: {
      tooltip: {
        mode: 'index',
        intersect: false,
      }
    },
    scales: {
      y: {
        title: {
          display: true,
          text: 'Value'
        },
        max: Math.max(...data)        
      },
      x: {
        title: {
          display: true,
          text: 'Month'
        }
      }      
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta.13/chart.js"></script>
<canvas id="myChart" height="100"></canvas>