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

问题描述

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

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

但是，如果数据点之一是 999，则 y 轴最大值变为 1000。有没有办法将 999 设置为 y 轴最大值 如果我不强制此最大值为 999我的图表中只有低值？我曾尝试在选项中使用 max 的 suggestedMax 失败。

解决方法

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

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

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

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>