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

gmol1639 于 2023-05-17 发布在 Chart.js

关注(0)|答案(1)|浏览(149)

ChartJS将options.scales[scaleId].min定义为“用户定义的刻度最小值，覆盖数据中的最小值”。有人会认为，如果我没有定义最小值，那么从数据中导出的最小值就可以使用。然而，事实并非如此。
我需要动态添加数据和标签，并从自动缩放的数据中获得缩放和平移限制。否则我可以缩放和平移远离实际数据，这看起来很难看。
在这个Stackblitz中，您可以看到，当我尝试记录轴刻度的最小值和最大值时，它们是未定义的，但是当我记录整个图表对象时，我可以看到刻度具有从数据导出的正确的最小值和最大值。
是否有方法检索自动缩放数据的最小值和最大值？而不需要自己循环每一个成百上千个项目的数据集数组？

chart.js

来源：https://stackoverflow.com/questions/70435104/chartjs-automatically-scaled-chart-has-undefined-min-and-max

1条答案

按热度按时间

7kqas0il1#

是的，这是可能的，选项对象只包含用户定义的选项。您可以直接进入图表上的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>

赞(0）回复(0）举报 2023-05-17

我来回答

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

1条答案

相关问题

热门标签

最新问答