中文 | 英文
轻松创建数据可视化动画视频。
演示
在线可编辑演示
警告
由于浏览器安全策略更新,在线编辑现在仅支持浏览,不再直接支持视频导出。
特点
本项目开源且免费。
这是一个基于 Web 环境,使用 TypeScript 编程的动画库。它可以用于数据可视化、视频动画展示、片头片尾等领域。
目前正在开发中,虽然功能已经实现,但尚未提供友好的界面,想要制作自己的作品需要阅读源代码并了解 TypeScript 编程。
如果您觉得 WebAssembly 版本的 FFmpeg 太慢,它也支持导出 PNG 序列并调用本地 FFmpeg 生成视频。
这个项目需要所有技术人员的技术支持。但如果您只是普通用户,也可以通过赞助来支持。您可以使用支付宝或微信通过 AZZ 进行支持。也可以通过 GitHub Sponsor 支持(需要一张信用卡)。
简介
这是一个更好的可视化模板。
与其前身相比,主要优势在于:
- 可编程:开放的接口,允许插入自定义代码,框架计算的数据,基于 Canvas API 的绘图。
- 直接输出视频:可以直接从每一帧图像渲染视频,无需任何屏幕录制工具。保持 FPS 稳定和渲染速度。同时,由于这一点,您现在可以导出任何分辨率,不受显示屏幕范围的限制。同时通过内置 API 实现进度拖拽,便于调试。
- 约定优于配置:最大程度简化用户配置,无需过多复杂设置即可获得美观的图表。
- 虚拟组件:类似虚拟 DOM,通过拆分组件和渲染器进一步增强可扩展性。便于移植到更多平台,未来支持更高效的 WebGL 渲染。
使用
目前,面向普通用户的 anichart 正在开发中,以下描述面向开发人员,较为核心。如果您现在有数据可视化需求,可以使用前身项目,或使用前面提到的在线编辑项目。
对于一般开发者,你可以使用这个仓库作为数据可视化项目的模板。你需要具备一些Javascript或Typescript的基本开发能力。
步骤
yarn install
yarn start
安装
对于想在项目中使用anichart的高级开发者,你可以按照以下方式安装。
通过包管理器
yarn add anichart
# 或
npm i anichart
通过HTML标签
<script src="https://cdn.jsdelivr.net/npm/anichart@1.1.12/dist/anichart.min.js"></script>
使用方法
使用Npm或Yarn导入
如果你使用标签导入,可以跳过这一步。但如果你使用NPM或Yarn,你需要用以下代码导入包:
const anichart = require("anichart");
或者
import * as anichart from "anichart";
准备数据
例如,使用CSV文件。
name,date,value,channel,other
Jannchie,2020-01-01,1,科技,other
Jannchie,2020-01-03,6,科技,other
Jannchie,2020-01-05,3,科技,other
Jannchie,2020-01-07,-,科技,other
Jannchie,2020-01-09,7,科技,other
Jannchie,2020-01-12,12,科技,other
Cake47,2020-01-03,10,生活,other
Cake47,2020-01-02,5,生活,other
Cake47,2020-01-06,2,生活,other
Cake47,2020-01-09,3,生活,other
Cake47,2020-01-11,4,生活,other
加载数据
// 默认情况下,数据需要通过内置的recourse对象加载
// 第一个参数是数据的路径,第二个参数是数据的名称
anichart.recourse.loadData("path/to/data.csv", "data")
创建对象
// 创建一个舞台
let stage = new anichart.Stage();
// 创建一个默认加载名为"data"的数据的图表
let chart = new anichart.BarChart();
// 挂载图表
stage.addChild(chart);
播放动画
你可以使用代码控制播放。
stage.play();
输出视频
内置FFMPEG用于导出。输出结果会打印在控制台中。
// 配置导出视频
stage.output = true;
测试
浏览器
yarn serve
# 或
npm run serve
Node.js
如果你有特殊需求,比如服务器端用户需要定期导出视频,你可以使用Node.js环境。
现在已经支持Node.js,你可以不需要任何配置就能在Node下运行项目,你将能够直接导出PNG序列,以便在FFmpeg等工具中进行视频集成(目前没有计划调用原生FFmpeg功能,我们期待开发者提出PR)。但是,Node环境并不是主要的开发测试环境,你在这个环境下开发可能会遇到未知的bug。我的精力有限,可能无法及时给予反馈。希望有能力的开发者能与我一起维护它。
你可以使用以下命令在Node.js下测试Anichart:
cd test
ts-node index.ts # 这个项目是用TypeScript编写的,所以需要TS-Node环境。你也可以将其编译成JS并测试编译后的文件。