charts = {
options: new Object,
setOptions: (options) => {
charts.options = options
// 将 min 下舍至 dist 的整数倍
charts.options.min = Math.floor(options.min / options.dist) * options.dist
// 将 max 上舍至 dist 的整数倍
charts.options.max = Math.ceil(options.max / options.dist) * options.dist
return charts
},
// 获取分段
getFrag: () => {
return (charts.options.max - charts.options.min) / charts.options.dist;
},
// 自动生成刻度数组,需要设置 最小值、最大值和每个刻度的间距
// 例如最小值 min=0;最大值 max = 100;dist 设置为 20,那么得到的结果就是 [0, 20, 40, 60, 80, 100]
// 生成刻度的方法是做图表控件坐标系的重要方法,后面很多计算都以它输出的结果为基础
getScale: () => {
let length = charts.getFrag()
// 创建一个空数组
let arr = [];
// 根据预期的数组长度循环赋值,数组的索引从 0 开始计算,所以用了小于号而不是小于等于,AE 中的索引和 javascript 是不一样的,一定要注意
for (let i = 0; i <= length; i++) {
// 循环到的每个元素等于最小值加上刻度乘以索引序号,所以第一个元素就完全等于最小值
arr.push(charts.options.min + charts.options.dist * i);
}
// 输出数组
return arr
},
// 获取数据原点
getOrigin: () => {
let arr = charts.getScale()
let index = arr.indexOf(0)
index == -1 ? 0 : index
return index
},
// 获取单位数据显示的像素
getRatio: (px) => {
return px / (charts.options.max - charts.options.min)
}
}
console.log(
charts.setOptions({
min: -3,
max: 5,
dist: 2
}).getScale(),
charts.getRatio(720),
charts.getOrigin()
)
console