如何在Chart.js中获取最小/最大轴值？

e5nszbig 于 9个月前发布在 Chart.js

关注(0)|答案(2)|浏览(147)

我想获取Chart.js 4.4.0图上轴的最小值和最大值。创建绘图时，必须在某处计算这些值。然而，通过Chart.js docs阅读，似乎没有任何访问它们的选项。
These two Stack Overflow的问题与此类似，但它们是专门针对使用chartjs-plugin-zoom插件的，我没有使用chartjs-plugin-zoom插件。此外，答案所采用的方法涉及找到最小和最大tick值，这不是我想要的。例如，一个图可能在每个整数处都有刻度，但图的右边界可能自然地落在x=10.5处。我想在10.5处找到图的实际边界，而不是在10处找到最大刻度。
在Flot.js中，这是很简单的，

xmin = plot.getAxes().xaxis.min;
xmax = plot.getAxes().xaxis.max;

这在Chart.js中可以做到吗？如何做到？

chart.js

来源：https://stackoverflow.com/questions/77281797/how-do-i-get-the-min-max-axis-values-in-chart-js

2条答案

按热度按时间

cnjp1d6j1#

如果你正在处理数值数据，你可以使用Math.min和Math.max方法：

const xAxisData = [1,2,3,4,5,6,7,8,9];

let xMin = Math.min(...xAxisData);

let xMax = Math.max(...xAxisData);

由x和y值组成的对象数组：

const yourData = yourChartData.data.dataset[0].data;

let xMin = Math.min(...yourData.map(abscissa => abscissa.x));

let xMax = Math.max(...yourData.map(abscissa => abscissa.x));

let yMin = Math.min(...yourData.map(ordinate => ordinate.y));

let yMax = Math.max(...yourData.map(ordinate => ordinate.y));

赞(0）回复(0）举报 9个月前

sigwle7e2#

如果chart是您的图表示例，即结果const chart = new Chart(....)，则您可以通过id到chart.scales访问刻度
有了scale对象后，要查找的属性是min和max。
因此，对于默认的x轴，它将是：

const {min: xMin, max: xMax} = chart.scales.x;

即使您不保存new Chart的结果，图表示例也几乎总是可以通过事件处理程序、回调函数等参数访问的。

赞(0）回复(0）举报 9个月前

我来回答

如何在Chart.js中获取最小/最大轴值？

2条答案

相关问题

热门标签

最新问答