はじめに

インストール

ターミナルに以下を入力してください：

# npm
npm i effcharts

# pnpm
pnpm add effcharts

# yarn
yarn add effcharts

クイックスタート

簡単に言うと、各Webコンポーネントは使用前に定義する必要があります。このライブラリの各モジュールには、定義に必要な関数が用意されています。

effcharts/pie モジュールの usePie 関数を使用すると、円グラフとドーナツグラフを使用できます。
effcharts/line モジュールの useLine 関数を使用すると、折れ線グラフと面グラフを使用できます。
effcharts/bar モジュールの useBar 関数を使用すると、棒グラフ（積み上げ棒グラフを含む）を使用できます。

各関数は、コンポーネントの動作を制御するための getConfig、observe、unobserve ハンドラを含むオブジェクトを返します。

例えば、棒グラフを使用したい場合：

jsx

import { useState, useEffect } from 'react';
import { useBar } from 'effcharts/bar';

// カスタムWebコンポーネントを使用する前に定義してください
// 注意：SSRの場合、ブラウザがドキュメント本文を解析する前に呼び出す必要があります
// そのため、ドキュメントのヘッダーに別途定義スクリプトを追加する必要がある場合があります
const { observe } = useBar();

export const App = () => {
    const ref = useRef();
    // チャート設定は`TBarConfig`型を満たす必要があります
    const [config, setConfig] = useState(JSON.stringify({
      data: [
        {
            name: 'Page A',
            uv: 4000,
            pv: 2400,
            amt: -2400,
        },
        {
            name: 'Page B',
            uv: 3000,
            pv: 1398,
            amt: -2210,
        },
        {
            name: 'Page C',
            uv: 2000,
            pv: 9800,
            amt: -2290,
        }
      ],
      series: {
        def: {
          title: 'Default',
          field: 'uv',
          color: 'oklch(0.49 0.13 268.85)'
        },
        sec: {
          title: 'Secondary',
          field: 'pv',
          color: 'oklch(0.61 0.1 213.72)'
        }
      }
    }));
    useEffect(() => {
      // Webコンポーネントのイベントを監視できます
      const unobserve = observe((e) => {
        // イベントハンドラ
      }, ref.current);
      // そして、あなたは観察を中止することができます
      return () => unobserve();
    }, []);
    // JSXでWebコンポーネントを使用するだけです
    // 設定をテキストコンテンツとして渡します
    return <div ref={ref}>
      <effcharts-bar>
        {config}
      </effcharts-bar>
    </div>;
}

以上です。シンプルさを楽しんでください。

はじめに ​

インストール ​

クイックスタート ​

はじめに

インストール

クイックスタート