【AE表达式】图表控件：折线图

图表是展现数据的常用表现形式，在一些视频中使用图表来展示产品参数或者数据是很常见的需求，大部分人都是有需要的时候从网上下载一些模板，但是那些模板多数都是死模板，要匹配自己想要的内容有改它的功夫，还不如跟我学学怎么从零开始创建自己的灵活的图表控件。

图表的常见类型可以直接参照 Office，基本类型主要有：条形图、柱状图、折线图和饼图，扩展类型包括散点图、面积图、圆环图、雷达图、气泡图、股价图等。利用 AE 表达式制作的图表控件需要满足下面的需求：

1. 根据设置自动建立坐标系；
2. 数据独立控制，自动计算数据显示；
3. 便捷的基本样式操控，并且方便扩展；

本文中选择了图表中最基本和常用的折线图，因为从这里开始比较简单，核心的内容是自动建立坐标系，下面有很多干货，一遍没学会就再学一遍。

提示：文章很长，但是内容不是很难，有耐心就行。

1. 自动化的坐标系

基本的二维坐标系

一个坐标系最基本的元素应该包含坐标原点，X 轴和 Y 轴，以及两个方向上的刻度线和文本标签，多数情况下 X 用来表时数据系列，Y 用来表时数据值，所以 X 轴可以是文本，Y 轴可以是数字。

图表控件所有的图形元素都在一个形状图层上实现，它可以作为一个独立的图层空间，通过内容组又可以按组别单独生成组空间和独立的组样式，最终包含在一个图层内，既可以让合成看起来比较简洁，有便于操控和管理。在控件图层上使用“表达式控制”组件进行参数和样式设定。

坐标原点

坐标原点即使用形状图层的坐标原点，它的位置是 [0, 0]，这并不是合成空间，而是形状图层的独立空间，意思就是所有元素的位置都是相对于形状图层位置的，这与图层父子链接是类似的。现在我把形状图层移动到了画面的左下角，坐标向上和右方向展开。坐标原点非常重要，它是后面计算所有位置信息的参照。

// 控件居中锁定，这样在调用这个合成的时候就方便排布位置了
[thisComp.width, thisComp.height] * .5 + [effect("控件宽度")("滑块") * -1, effect("控件高度")("滑块")] * .5

上面的代码把控件的位置在合成中居中对齐，这样在调用合成的时候可以更加方便的定位。

X Y 坐标轴

坐标轴的长度与参数设置的宽高匹配，如果你需要做延申，只需要稍微修改一下偏移量即可，为了保证数据呈现在画面中居中，可以在生成坐标轴的时候增加偏移量。

// 创建 X 坐标轴，它的长度与整个控件坐标系的宽度相等。
createPath(points = [[0,0], [effect("控件宽度")("滑块"),0]], [], [], false)

注意坐标轴不等于数据的坐标原点，除非坐标轴从 0 开始，就是最小值那个选项等于 0。坐标轴与形状图层的原点是对齐的，这样是最容易计算所有位置的，因为上述它与数据原点不同的原因，所以不建议将这条坐标轴锁定在数据 0 的位置，它主要是用来进行空间控制的。

// 创建 Y 坐标轴
createPath(points = [[0,0], [0,effect("控件高度")("滑块") * -1]], [], [], false)

Y 坐标轴上的刻度线和文本

先说刻度的文本，可不是我手工录入进去的，它是使用表达式完成的自动计算和定位，当你修改了控件的参数，它会自动跟着变动。

// 自动生成刻度，这里使用 getScale() 方法就比较完整了，因为我们需要把得到的数组变成纵向排列的一样行文本
footage("chartLine.jsx").sourceData;
let _arr = chartLine.getScale(thisComp.layer("控件").effect("最小值")("滑块"), thisComp.layer("控件").effect("最大值")("滑块"), thisComp.layer("控件").effect("刻度")("滑块"));
// 将文本的行距设置为 0，这是非常重要的，因为后面要单独去控制
text.sourceText.style.setLeading(0).setFillColor(thisComp.layer("控件").effect("控件颜色")("颜色")).setText(_arr.join('\r'))

先说如何自动计算出刻度的方法：在控件层设置（效果的表达式控制）中有最小值、最大值和刻度三个参数，它们代表的是数据值，而不是显示的像素值，计算的方法就是最小值与最大值的差除以刻度，商为我们一共要把控件高度分割为几等份，刻度线和文本会比分段多一个。然后我们用这个数字循环，每一次都增加一次刻度，就得到了每一个刻度的值。下面看一下 getScale() 方法的实现过程：

    // 自动生成刻度数组，需要设置 最小值、最大值和每个刻度的间距
    // 例如最小值 min=0；最大值 max = 100；dist 设置为 20，那么得到的结果就是 [0, 20, 40, 60, 80, 100]
    // 生成刻度的方法是做图表控件坐标系的重要方法，后面很多计算都以它输出的结果为基础
    getScale: (min, max, dist) => {
     
        // 先要处理最小值和最大值，如果他们不是 dist 的整数倍，则需要下舍或上舍为 dist 的整数倍，不然就没有办法对齐
        // 最小值需要下舍，继续使用以上面的例子，如果 min 设置为 > 0 且 < 20 的任何值，那么最小值都会自动下舍至 0
        min = Math.floor(min / dist) * dist;
        // 最大值需要上舍，原理相同，如果 max 设置的值是 98，那么就必须上舍为 100
        max = Math.ceil(max / dist) * dist;
        // 使用修正过的最小值、最大值来计算刻度应该显示的刻度数量，即要生成的数组长度