这个方法是要用到 After Effects 中的,因为我一直想编写一套自动化的 AE 图表方法,大多数图表都涉及到坐标系,但是手动生成坐标系是非常麻烦的,而且修改的时候会出大麻烦,所以一点一点来写,先搞定自动坐标系的问题。
下面这个方法现在仅局限于 js,如果要用到 AE 里面还需要参考另一篇文章:
王世杰:[AE 表达式]函数复用技巧因此这篇文章暂时不归类到 AE 表达式专栏中。
直接贴代码,省事儿点儿,因为注释写的算是比较详细了:
/**
* 自动生成坐标刻度的方法
* @arr 是一个数组,顺序无所谓
* @alignToOrigin 是不是对齐到 0,下面有说明
*/
function getScale(arr, alignToOrigin = false) {
// arr 可以只有一个值,此时自动对齐到 0
if (arr.length == 1) {
arr.push(0)
}
// 获取实际的最小值
let _min = Math.min.apply(null, arr);
// 获取实际的最大值
let _max = Math.max.apply(null, arr);
// 柱状图是比较值的总数的图标,因此无论是最大值还是最小值,都需要以 0 作为参考
// 如果时折线图,有时为了看出明显的折线波动,就不需要以 0 坐标为起点
// 最小值大于 0 时,代表所有值都是正数
if (alignToOrigin && _min > 0) { _min = 0 };
// 最大值小于 0 时,代表所有值都是负数
if (alignToOrigin && _max < 0) { _max = 0 };
// 首先计算出从最小值到最大值的跨度,然后转换成指数计数法(科学计数法)
// 科学记数法是一种记数的方法,把一个数表示成 a 与 10 的 n 次幂相乘的形式
// 1≤|a|<10,a 不为分数形式,n 为整数
// 例如 0.002 表示为 2e-3;2000 表示为 2e+3
// 把指数计数按 "e" 分割为数组,数组第二个数字就可以用来确定数字数位
let _distance = (_max - _min).toExponential().split("e");
// 先以数位作为格长度,例如值跨度是个位数,则格长度为 1
let _unit = Math.pow(10, _distance[1]);
// 根据情况自动调整 _unit
if (_distance[0] <= 2) {
// 如果指数计数法中的 a 小于等于 2,则用 0.2 * 10 的 n 次幂为格长度
_unit *= 0.2;
} else if (_distance[0] > 2 && _distance[0] <= 4) {
// 如果指数计数法中的 a 大于 2 且小于等于 4,则用 0.5 * 10 的 n 次幂为格长度
_unit *= 0.5;
} else {
_unit;
}
// 处理最小值和最大值,让最小值和最大值刚好在 _discrete 外围的格上(可以对 _unit 整除)
// 最小值如果不能整除,则退格到前一个整单位
if (_min % _unit !== 0) {
if (_min < 0) {
// 最小值为负数时需要减一个单位
_min -= _unit;
}
// 去掉余数
_min -= _min % _unit;
}
// 最大值如果不能整除,则进格到下一个整单位
if (_max % _unit !== 0) {
if (_max > 0) {
// 最大值为正数时需要加一个单位
_max += _unit;
}
// 去掉余数
_max -= _max % _unit;
}
// 返回对象
return {
min:_min,
max:_max,
unit:_unit
}
}
// 调用演示
let scale = getScale([-1.2,-4.1])
console.log(JSON.stringify(scale))
for(let i=0;i<=(scale.max-scale.min)/scale.unit;i++){
console.log(scale.min +scale.unit*i)
}