12. 值轴刻度单位/最大最小刻度的计算

生活观察1: 刻度单位与4个特定数值有关

日常生活中,我们常见的竹尺、卷尺、量角器上都有一系列数值刻度。

  • 刻度单位 = 1
    … 0 、 1 、 2 、 3 、 4 、 5 …
  • 刻度单位 = 2
    … 0 、 2 、 4 、 6 、 8 、 10 …
  • 刻度单位 = 5
    … 0 、 5 、 10 、 15 、 20 、 25 …
  • 刻度单位 = 10
    … 0 、 10 、 20 、 30 、 40 、 50 …
  • 刻度单位 = 25
    … 0 、 25 、 50 、 75 、 100 、 125 …
  • 刻度单位 = 50
    … 0 、 50 、 100 、 150 、 200 、 250 …
  • 刻度单位 = 100
    … 0 、 100 、 200 、 300 、 400 、 500 …

【规则】
刻度单位 = ( 1 / 2 / 2.5 / 5) x $10^{n}$






生活观察2: 图表数值轴刻度标签个数不会太多

请用搜索引擎查找各类图表的图片,观察其数值轴上的标签个数,有如下结果:
几乎所有图表值轴的标签个数不超过10个
由此,刻度单位的数量级m和图表数据最大值的数量级n之间的关系是: m=n 或 10×m=n
例如:
图表数据最大值=9000,数量级=3
刻度单位的值在900-1000上下,数量级=2或3

【规则】
刻度单位和图表数据最大值的数量级或相等或相差一位


数值轴刻度单位计算思路

  • 外部传入图表数据,可以计算出最大、最小值。
  • 外部传入标签最多个数,可以计算出【标签刻度最小值】
    标签刻度最小值 = (最大值-最小值)/(外部传入标签最多个数-1)
  • 可以计算出【标签刻度最小值】的数量级n
    *参考【10. 计算数量级 - 利用数学对数】
  • 用( 1 / 2 / 2.5 / 5 / 10)中的数依次乘以10的n次方,确定出第一个比【标签刻度最小值】大的数b
  • 单位刻度a = b x $10^{n}$


示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>值轴数字刻度单位,最大最小刻度的计算</title>
</head>
<body>

<script>
var min = -100 ,
max = 10001 ,
scaleMaxCount = 7 ,

scaleUnit ,
minScale ,
maxScale ;

//刻度单位、最小刻度、最大刻度
scaleUnit = getScaleUnit( min , max , scaleMaxCount ) ;
minScale = Math.floor( min / scaleUnit ) * scaleUnit ;
maxScale = Math.ceil( max / scaleUnit ) * scaleUnit ;

//输出验证
console.log( scaleUnit + ' ' + minScale + ' ' + maxScale) ;


//计算刻度单位
function getScaleUnit( min , max , scaleMaxCount)
{
var i , len ,
avg ,
gaps = [1, 2, 2.5, 5,10] ,
pow ,
scaleUnit ;

//计算均分值
avg = (max - min) / (scaleMaxCount-1);

//计算均分值的数量级
magnitude = getMagnitude(avg) ;

//循环,直至第一个大于或等于均分值的整数值出现
len = gaps.length ;
for(i=0 ; i<len ; i++)
{
scaleUnit = gaps[i] * magnitude ;
if(scaleUnit >= avg)
{
break ;
}
}

//返回
return scaleUnit ;
}

//计算指定数值的数量级
function getMagnitude( num)
{
//计算数值的10的幂
var pow = Math.floor( Math.log(num) / Math.log(10)); ;

//计算数值的数量级
var magnitude = Math.pow(10,pow) ;

return magnitude ;
}

</script>

</body>
</html>