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

Question

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

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

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

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

Answer 1

是的，这是可能的，选项对象只包含用户定义的选项。您可以直接进入图表上的比例对象以检索最小值和最大值，就像这样

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>

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

ChartJS automatically scaled chart has undefined min and max

chart.js