uPlot 封装库

一系列 uPlot 封装库，让你可以在你喜欢的框架中以声明式方式操作图表。

目录

• 动机
• 快速开始
• React
• 安装
• 如何使用
• 演示
• Vue.js
• 安装
• 如何使用
• 演示
• Svelte
• 安装
• 如何使用
• 演示
• 文档

动机

虽然已经存在其他几个uPlot的包装器，但它们都有以下某些限制之一：

• 它们只在组件挂载阶段创建uPlot实例，并期望你自己处理所有的更新逻辑。
• 每当属性发生变化时，它们都会重新创建uPlot实例，即使该实例可以通过更新来反映变化。

入门

根据你使用的框架，参见下面的React、Vue.js或Svelte部分。 同时参见所有框架通用的API文档。

React

安装

使用uplot-react包并安装uplot依赖：

• 使用npm: $ npm install uplot-react uplot
• 使用yarn: $ yarn add uplot-react uplot

如何使用

import React from 'react';
import uPlot from 'uplot';
import UplotReact from 'uplot-react';
import 'uplot/dist/uPlot.min.css';
const Chart = () => (
     {}} onDelete={(chart) => {}} />
);

演示

查看实时演示

你也可以在本地运行演示应用：

$ git clone https://github.com/skalinichev/uplot-wrappers.git

$ cd uplot-wrappers && yarn install && yarn run serveReact

ReactJS 演示

快速入门的简单示例。 ReactJS 演示

Vue.js

安装

安装带有 uplot 依赖的 uplot-vue 包：

• 使用 npm：$ npm install uplot-vue uplot
• 使用 yarn：$ yarn add uplot-vue uplot

如何使用

使用模板

使用 JSX

// Vue.js 2
import Vue from 'vue';
// Vue.js 3
import { createApp } from 'vue';
import uPlot from 'uplot';
import UplotVue from 'uplot-vue';
import 'uplot/dist/uPlot.min.css';
{
    ...,
    render() {
        return (
             {}}
                onCreate={(chart) => {}}
            />
        );
    }
}

注意：由于 Vue 限制，不支持通过变异修改属性。您必须创建属性的副本，即替换它，参见一个示例了解总体思路。

演示

查看 Vue.js 2 在线演示

您也可以在本地运行演示应用：

$ git clone https://github.com/skalinichev/uplot-wrappers.git

$ cd uplot-wrappers && yarn install

Vue.js 2：

$ yarn run serveVue

Vue.js 3：

$ yarn run serveVue3

Svelte

安装

安装带有 uplot 依赖的 uplot-svelte 包：

• 使用 npm：$ npm install uplot-svelte uplot
• 使用 yarn：$ yarn add uplot-svelte uplot

使用方法

演示

查看示例 Svelte 示例

你也可以在本地运行演示应用：

$ git clone https://github.com/skalinichev/uplot-wrappers.git

$ cd uplot-wrappers && yarn install && yarn run serveSvelte

文档

| 参数 | 必需项 | 描述 | | :--------: | :----: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | options | 必需 | uPlot 的选项。作为第一个参数传递给 uPlot 构造函数：new uPlot(options) | | data | 必需 | uPlot 的数据。作为第二个参数传递给 uPlot 构造函数：new uPlot(options, data) | | target | 可选 | uPlot 的目标 HTML 元素。作为第三个参数传递给 uPlot 构造函数：new uPlot(options, data, target) 如果 props 中未传入，则会自动创建一个新的 div 目标元素 | | onCreate | 可选 | 回调函数，在 uPlot 实例创建或重新创建时调用 | | onDelete | 可选 | 回调函数，在 uPlot 实例销毁之前调用，无论是因为 props 变化太大无法更新图表，还是组件即将卸载 | | className/class | 可选 | 传递给自动创建的目标 div 元素的类名。使用 'target' prop 时类名会被忽略。 | | resetScales | 可选 | 控制在数据变化时是否重置刻度的标志。默认值为 true。 |

--- Tranlated By Open Ai Tx | Last indexed: 2025-09-25 ---