本文介绍了获取使用Chart.js渲染的折线图的y轴的最大值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用Chart.js绘制分散的折线图,效果很好。
对于渲染算法,我需要找出y轴上显示的最大值,因此,假设我在数据集中的最大点的y = 248,因此y轴将250显示为最大值。我需要找出它是250。

I use Chart.js to render a scattered line chart, which works pretty well.For the rendering algorithm I need to find out the highest value shown on the y-axis, so let's say my "largest" point in the dataset has y = 248, so the y-axis shows 250 as the largest value. I need to find out that it's 250.

我试图在运行时检查图表对象,就像这样:

I tried to inspect the chart object at runtime, like so:

lineChart.options.scales[0].ticks.??

但是看来我只能找出以编程方式设置的设置。

but it seems that I can only find out the settings I set myself programmatically.

也看一下综合性的Chart.js文档并没有指出解决方案。

Also looking at the comprehensive Chart.js docs did not point me to the solution.

任何建议如何计算出该值?

Any advice how to figure out this value?

推荐答案

有回调方法,您可以在其中获取将在yAxes上显示的值的数组。

该数组的第一个元素将是yAxes的最大值。以下是相同的示例代码。

There is callback method in which you can get the array of values which will show on yAxes.
The first element of that array will be the highest value for the yAxes. Below is the sample code for the same.

var yAxesticks = [];
var highestVal;
var chartInstanceHoverModeNearest = new Chart(ctx, {
                type: 'bar',
                data: data,
                options:{
                    scales: {
                        yAxes : [{
                            ticks : {
                                beginAtZero : true,
                                callback : function(value,index,values){
                                    yAxesticks = values;
                                    return value;
                                }
                            }
                        }]
                    }
                }
            });

 highestVal = yAxesticks[0];

这篇关于获取使用Chart.js渲染的折线图的y轴的最大值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-29 05:07