使用angular-chart.js在条形图中手动设置y轴刻度 [英] set y-axis scale manually in a bar chart using angular-chart.js

查看:95
本文介绍了使用angular-chart.js在条形图中手动设置y轴刻度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用angular-chart.js(0.9.0)创建条形图。 Chart.js的版本是1.0.2。

I'm creating a bar chart using angular-chart.js(0.9.0). The version of Chart.js being used along is 1.0.2.

在我的图表中,不幸的是,价值范围非常广泛。最高值为90,000s,最低值为4s或40s。由于这样的范围,图表没有像我希望的那样出现。例如,在下面的图表中,最高值为42000,最低值为70.

In my chart, unfortunately, the range of values is very broad. The highest value being in 90,000s and the lowest values being in 4s or 40s. Due to such a range, the chart is not appearing as I would have wanted it to. For example, in the below chart, the highest value is 42000 and the lowest value is 70.

我想知道我们是否可以在Math.pow值中手动设置Y轴的刻度,即将y轴刻度设置为10,100,1000,10000,100000和等等。这样我想我能够在我的图表中正确覆盖这样的高范围数据。

I'm wondering whether we can set the scales of Y-axis manually in Math.pow values i.e have the y axis scale set as 10, 100, 1000, 10000, 100000 and so on. This way I guess I would be able to cover such a high range data correctly in my chart.

我尝试使用图表选项并手动设置比例,如下所示。但是,使用此比例变为0,100,200,300等等。

I tried using chart-options and setting the scales manually like below. However, using this the scale became 0, 100, 200, 300 and so on.

            $scope.majorOptions = {
                responsive: false,
                maintainAspectRatio: true,
                scaleOverride: true,
                scaleSteps: 10,
                scaleStepWidth: Math.pow(10,2),
                scaleStartValue: 0
            };  

有没有其他方法可以设置y轴的功率为10?

Is there any other approach by which I can set the y axis scales in powers of 10?

或者你建议我采取任何其他方法来捕捉我的图表中的这些高范围值。

Or is there any other approach that you would suggest I take to capture these high range values in my chart.

谢谢。

推荐答案

尝试使用'type'指定你的yAxes :'logarithmic',按照 http://www.chartjs.org / docs / latest / axes / cartesian /#tick-configuration

Try specifying your yAxes with 'type': 'logarithmic' as per http://www.chartjs.org/docs/latest/axes/cartesian/#tick-configuration

这篇关于使用angular-chart.js在条形图中手动设置y轴刻度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆