/** * Free Remotion Template Component * --------------------------------- * This template is free to use in your projects! * Credit appreciated but not required. * * Created by the team at https://www.reactvideoeditor.com * * Happy coding and building amazing videos! 🎉 */ "use client"; import { interpolate, useCurrentFrame } from "remotion"; export default function AreaChart() { const frame = useCurrentFrame(); const data = [ { x: 0, y: 20, label: "Mon" }, { x: 1, y: 45, label: "Tue" }, { x: 2, y: 35, label: "Wed" }, { x: 3, y: 60, label: "Thu" }, { x: 4, y: 55, label: "Fri" }, { x: 5, y: 75, label: "Sat" }, { x: 6, y: 70, label: "Sun" }, { x: 7, y: 85, label: "Mon" }, { x: 8, y: 80, label: "Tue" }, { x: 9, y: 95, label: "Wed" }, ]; const chartWidth = 900; const chartHeight = 500; const padding = 70; const xScale = (x: number) => (x / (data.length - 1)) * (chartWidth - padding * 2) + padding; const yScale = (y: number) => chartHeight - padding - (y / 100) * (chartHeight - padding * 2); // Build line path const linePath = data .map((d, i) => `${i === 0 ? "M" : "L"} ${xScale(d.x)} ${yScale(d.y)}`) .join(" "); // Build area path (closed polygon) const areaPath = linePath + ` L ${xScale(data[data.length - 1].x)} ${chartHeight - padding}` + ` L ${xScale(data[0].x)} ${chartHeight - padding} Z`; // Clip rect animation - reveals left to right const clipWidth = interpolate( frame, [0, 60], [0, chartWidth - padding * 2], { extrapolateRight: "clamp" } ); return (

{/* Chart title */}

Performance Metrics

); }

Area Chart

安装