ChartJS 自动缩放图表具有未定义的最小值和最大值

【问题标题】：ChartJS automatically scaled chart has undefined min and maxChartJS 自动缩放图表具有未定义的最小值和最大值
【发布时间】：2021-12-21 20:53:17
【问题描述】：

ChartJS defines options.scales[scaleId].min 为“用户定义的比例最小值，覆盖数据中的最小值”。有人会认为，如果我没有定义最小值，那么从数据中得出的最小值将是可用的。然而，事实并非如此。

我需要动态添加我的数据和标签，并从自动缩放的数据中得出缩放和平移限制。否则我可以缩放和平移远离实际数据，这看起来很难看。

在Stackblitz 中，您可以看到，当我尝试记录轴刻度最小值和最大值时，它们是未定义的，但是当我记录整个图表对象时，我可以看到刻度具有正确的最小值和最大值数据。

有没有办法检索自动缩放数据的最小值和最大值？不用自己循环数十万个长数据集数组吗？

【问题讨论】：

标签： chart.js

【解决方案1】：

是的，这是可能的，选项对象仅包含用户定义的选项。您可以进入直接在图表上的 scales 对象以检索最小值和最大值，如下所示

const chart = new Chart(ctx, config);
const max = chart.scales[scaleId].max;
const min = chart.scales[scaleId].min;

const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'pink'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'orange'
      }
    ]
  },
  options: {}
}

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

console.log(`Max: ${chart.scales.y.max}, Min: ${chart.scales.y.min}`)

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

【讨论】：