面积标注折线图 折线在高于面积图之上和低于面积图之下能设置两个不同的颜色吗？

[Mayhry]

官方面积标注折线图 使用的是额外的clip方法将超出面积的折线图设置为了一个颜色，这个方法获取的元素“cloned-line”，且仅有这一个，一个图也只会渲染一次。

[moayuisuda]

function clip(chart) {
const { canvas } = chart.getContext();
const document = canvas.document;
const [cloned] = document.getElementsByClassName('cloned-line');
if (cloned) cloned.remove();
const elements = document.getElementsByClassName('element');
const line = elements.find((d) => d.markType === 'line');
const area = elements.find((d) => d.markType === 'area');
const clonedLine = line.cloneNode(true);
clonedLine.data = line.data;
clonedLine.style.stroke = '#ff4d4f';
clonedLine.style.clipPath = null;
clonedLine.className = 'cloned-line';
line.parentNode.insertBefore(clonedLine, line);
line.style.clipPath = area;
}