§Ẏagr

Yagr 是一个高性能的 HTML5 Canvas 图表渲染器，基于 uPlot 构建。它为 uPlot 图表提供了高级功能。

§特性

• 折线图、面积图、柱状图和点图等可视化类型。可按系列配置
• 可配置的图例提示框
• 带有额外小数精度选项的坐标轴
• 具有可配置范围函数和转换的刻度
• 绘图线和绘图带。可配置的绘制层
• 响应式图表 (需要 ResizeObserver)
• 堆叠面积图/柱状图的高级支持
• 可配置的标记点
• 浅色/深色主题
• 数据归一化
• 可配置的十字准线、鼠标标记和吸附
• TypeScript
• 本地化
• 颜色名称中的 CSS 变量
• 分页式内联图例
• 错误处理和扩展钩子
• 缺失数据的对齐和插值
• 实时更新

§文档

§快速入门

npm i @gravity-ui/yagr

§NPM 模块

import Yagr from '@gravity-ui/yagr';

new Yagr(document.body, {
    timeline: [1, 2, 3, 4, 5],
    series: [
        {
            data: [1, 2, 3, 4, 5],
            color: 'red',
        },
        {
            data: [2, 3, 1, 4, 5],
            color: 'green',
        },
    ],
});

§Script 标签

<script src="https://unpkg.com/@gravity-ui/yagr/dist/yagr.iife.min.js"></script>
<script>
    new Yagr(document.body, {
        timeline: [1, 2, 3, 4, 5],
        series: [
            {
                data: [1, 2, 3, 4, 5],
                color: 'red',
            },
            {
                data: [2, 3, 1, 4, 5],
                color: 'green',
            },
        ],
    });
</script>

§示例

需要特定功能？Yagr 在 demo/examples 文件夹中提供了一些有用的示例。如何使用当前版本启动它们：

1. 克隆仓库。
2. 安装依赖 npm i。
3. 运行 npm run build。
4. 运行 npx http-server .。
5. 根据 http-server 的输出在浏览器中打开示例。