🌐 言語
uPlot ラッパー
お気に入りのフレームワーク内で宣言的にチャートを扱えるようにする、uPlot のラッパー集です。
目次
モチベーション
他にもいくつかのuPlotラッパーがすでに存在していますが、それらは以下のいずれかの制限があります。
- コンポーネントのマウント時にuPlotインスタンスを一度だけ生成し、以降の更新ロジックは全てユーザーが管理する必要がある。
- propsが変更されるたびに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 example を参照してください。
デモアプリをローカルで実行することもできます：
$ 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 ---