SVG图表生成器

什么是SVG图表生成API？

这是一个简单而强大的API，能够通过简单的GET请求生成专业的SVG格式图表。无需复杂的图表库，只需一个图片标签就能在您的网页中展示精美的数据可视化图表。

基本用法

最简单的使用方式：

<img src="https://api.yyy001.com/api/chart?data=10,20,30" alt="图表">

支持的图表类型

折线图

柱状图

面积图

快速入门步骤

1

准备数据

将数据转换为逗号分隔的数值序列

2

选择类型

选择合适的图表类型展示数据

3

配置选项

设置标题、标签等可选参数

4

生成图表

通过API URL获取SVG图表

参数名	类型	必填	默认值	说明
type	string	否	line	图表类型：line/area/bar
data	string	是	-	数据值，用逗号分隔，多组数据用分号分隔

注意事项

所有数值必须是有效的数字
多组数据时，每组数据的长度必须相同
标签数量应与数据点数量匹配
系列名称数量应与数据组数量匹配

示例代码

HTML中使用

<img src="https://api.yyy001.com/api/chart?type=line&data=10,20,30&title=示例图表" alt="数据图表">

JavaScript动态加载

const chartUrl = new URL('https://api.yyy001.com/api/chart');
chartUrl.searchParams.set('type', 'line');
chartUrl.searchParams.set('data', '10,20,30');
chartUrl.searchParams.set('title', '示例图表');

const img = document.createElement('img');
img.src = chartUrl.toString();
document.body.appendChild(img);

高级用法

多数据系列

使用分号分隔多个数据系列，同时可以为每个系列指定名称：

data=10,20,30;15,25,35&series=系列1,系列2

自定义样式

可以通过参数自定义图表的视觉效果：

theme: 切换明暗主题
smooth: 控制线条平滑度
grid: 显示/隐藏网格
animation: 启用/禁用动画

SVG图表生成器

图表配置

图表预览

使用文档

什么是SVG图表生成API？

基本用法

支持的图表类型

快速入门步骤

准备数据

选择类型

配置选项

生成图表

注意事项

示例代码

HTML中使用

JavaScript动态加载

高级用法

多数据系列

自定义样式

错误提示