anichart.js

<p align="center"> <img height="250px" src="https://yellow-cdn.veclightyear.com/0a4dffa0/8be0d429-acec-477d-b32d-7047493d8d03.png?raw=true"><br/> </p> <p align="center"> <img href="https://codetime.dev" alt="Custom badge" src="https://img.shields.io/endpoint?style=social&url=https%3A%2F%2Fapi.codetime.dev%2Fshield%3Fid%3D2%26project%3Danichart%26in%3D0"> <img src="https://data.jsdelivr.com/v1/package/npm/anichart/badge"> <img alt="NPM" src="https://img.shields.io/npm/l/anichart?style=flat-square"> <img alt="npm" src="https://img.shields.io/npm/v/anichart?style=flat-square"> <img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/Jannchie/anichart.js?style=flat-square"> <img alt="GitHub closed issues" src="https://img.shields.io/github/issues-closed/Jannchie/anichart.js?style=flat-square"> </p>

中文 | 英文

轻松创建数据可视化动画视频。

演示

在线可编辑演示

警告

由于浏览器安全策略更新，在线编辑现在仅支持浏览，不再直接支持视频导出。

特点

本项目开源且免费。

这是一个基于 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并测试编译后的文件。