uPlot sarmalayıcıları

UPlot için favori framework’ünüzde grafiklerle deklaratif olarak çalışmanızı sağlayan bir sarmalayıcı koleksiyonu.

İçindekiler

• Motivasyon
• Başlangıç
• React
• Kurulum
• Nasıl kullanılır
• Demo
• Vue.js
• Kurulum
• Nasıl kullanılır
• Demo
• Svelte
• Kurulum
• Nasıl kullanılır
• Demo
• Dokümantasyon

Motivasyon

Diğer uPlot sarmalayıcılarının birkaçı zaten mevcutken, hepsi aşağıdaki sınırlamalardan birine sahip:

• uPlot örneğini yalnızca bileşen montaj aşamasında oluştururlar ve tüm güncelleme mantığını kendinizin yönetmesini beklerler.
• Özellikler değiştiğinde uPlot örneğini baştan yeniden oluştururlar, örnek güncellenerek değişiklikleri yansıtabilecek olsa bile.

Buna kıyasla bu kütüphane, özellikler değiştiğinde uPlot örneğini yeniden oluşturmamaya özen gösterir. Yeniden oluşturmak yerine, uPlot'un genel API'sini kullanarak örneği özelliklerle güncel tutmaya çalışır.

Başlangıç

Kullandığınız çerçeveye bağlı olarak aşağıdaki React, Vue.js veya Svelte bölümlerine bakın. Ayrıca tüm çerçeveler için ortak olan API dokümantasyonuna bakın.

React

Kurulum

uplot-react paketini uplot bağımlılığı ile kurun:

• npm ile: $ npm install uplot-react uplot
• yarn ile: $ yarn add uplot-react uplot

Ayrıca projeniz içinde React 16.8 veya üzeri kurulu olmalıdır.

Nasıl kullanılır

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

Demo

canlı demoyu inceleyin

Ayrıca demo uygulamasını yerel olarak çalıştırabilirsiniz:

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

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

ReactJS Demo

Hızlıca başlamak için basit bir örnek. ReactJS Demo

Vue.js

Kurulum

uplot bağımlılığı ile birlikte uplot-vue paketini yükleyin:

• npm ile: $ npm install uplot-vue uplot
• yarn ile: $ yarn add uplot-vue uplot

Ayrıca projenizin içinde Vue.js'in kurulu olması gerekmektedir (hem 2.6 hem de 3.x sürümleri desteklenir).

Nasıl kullanılır

Şablon kullanımı

JSX Kullanımı

// 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) => {}}
            />
        );
    }
}

Not: Özellik değişiklikleri mutasyonla desteklenmemektedir, bunun nedeni Vue sınırlaması'dır. Özelliğin bir kopyasını oluşturmanız, yani onu değiştirmeniz gerekmektedir. Genel fikir için örneğe bakabilirsiniz.

Demo

Vue.js 2 canlı demosuna göz atın

Demo uygulamasını yerel olarak da çalıştırabilirsiniz:

$ 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

Kurulum

uplot bağımlılığı ile birlikte uplot-svelte paketini yükleyin:

• npm kullanarak: $ npm install uplot-svelte uplot
• yarn kullanarak: $ yarn add uplot-svelte uplot

Ayrıca projenizin dizininde Svelte'in kurulu olması gerekir. UplotSvelte bileşeni, Svelte ve SvelteKit projeleriyle uyumludur.

Nasıl kullanılır

Demo

Örneğe bakın Svelte örneği

Demo uygulamasını yerel olarak da çalıştırabilirsiniz:

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

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

Dokümantasyon

| Parametre | Gereklilik | Açıklama | | :-------------: | :--------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | options | gerekli | uPlot için seçenekler. uPlot yapıcısına ilk argüman olarak iletilir: new uPlot(options) | | data | gerekli | uPlot için veri. uPlot yapıcısına ikinci argüman olarak iletilir: new uPlot(options, data) | | target | isteğe bağlı | uPlot için hedef html elementi. uPlot yapıcısına üçüncü argüman olarak iletilir: new uPlot(options, data, target) Eğer props ile bir hedef iletilmezse otomatik olarak yeni bir div elementi oluşturulur | | onCreate | isteğe bağlı | uPlot örneği oluşturulduğunda veya yeniden oluşturulduğunda çağrılan geri çağırma fonksiyonu | | onDelete | isteğe bağlı | uPlot örneği yok edilmeden önce çağrılan geri çağırma fonksiyonu, ya grafik güncellenemeyecek kadar çok props değiştiği için ya da bileşen kaldırılmak üzere olduğu için | | className/class | isteğe bağlı | Otomatik olarak oluşturulan hedef div elementine iletilen sınıf adı. 'target' props'u kullanıldığında sınıf adı dikkate alınmaz. | | resetScales | isteğe bağlı | Veri değiştiğinde ölçeklerin sıfırlanıp sıfırlanmayacağını kontrol eden bayrak. Varsayılan değer true'dur. |

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