折れ線グラフ

{"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":"Base vals","field":"uv","color":"oklch(0.61 0.1 213.72)","smooth":true,"area":{"towards":"max"}},"sec":{"title":"Next vals","field":"pv","color":"oklch(0.49 0.13 268.85)"}}}

目的

このコンポーネントを使用すると、折れ線グラフと面グラフを作成できます。デフォルトでは、グリッド、軸、ラベル、ツールチップが有効になっています。ソースデータはdataフィールドに配列として渡され、表示される曲線はseriesフィールドにオブジェクトとして渡されます。デフォルトでは、データオブジェクト内のnameフィールドが関連ラベルの生成に使用されます。列のサイズと色は、それぞれseriesフィールドとcolorで定義されます。線の平滑化はsmoothフィールドで調整されます。デフォルトでは、線の下の領域が着色されます。areaフィールドにfalseを指定することで、この着色を無効にすることができます。または、塗りつぶしの方向（max、min、zeroオプションが利用可能）を変更することもできます。利用可能なすべての設定はTLineConfig型で確認できます。

使用法

import { useState, useEffect } from 'react';
import { useLine } from 'effcharts/line';

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

export const App = () => {
    const ref = useRef();
    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: 'Base vals',
                field: 'uv',
                color: 'oklch(0.61 0.1 213.72)',
                smooth: true,
                area: {
                    towards: 'max'
                }
            },
            sec: {
                title: 'Next vals',
                field: 'pv',
                color: 'oklch(0.49 0.13 268.85)'
            },
        }
    }));
    useEffect(() => {
        // Webコンポーネントのイベントを監視できます
        const unobserve = observe((e) => {
            // イベントハンドラ
        }, ref.current);
        // そして、あなたは観察を中止することができます
        return () => unobserve();
    }, []);
    // JSXでWebコンポーネントを使用するだけです
    return <div ref={ref}>
        <effcharts-line>
            {config}
        </effcharts-line>
    </div>;
}

型

ILineChartAttrsインターフェースを使用してWebコンポーネントを宣言できます。また、TLineConfig型を使用してチャートの設定を検証することもできます。

import { HTMLAttributes } from 'react';
import { ILineChartAttrs, TLineConfig } from 'effcharts/line';

type CustomElement<T> = Partial<T & HTMLAttributes<T> & { children: any }>;

// effchartsコンポーネントを宣言する
declare module 'react' {
  namespace JSX {
    interface IntrinsicElements {
        'effcharts-line': CustomElement<ILineChartAttrs>;
    }
  }
}

// 設定を準備する
const config = {
    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: 'Base vals',
            field: 'uv',
            color: 'oklch(0.61 0.1 213.72)',
            smooth: true,
            area: {
                towards: 'max'
            }
        },
        sec: {
            title: 'Next vals',
            field: 'pv',
            color: 'oklch(0.49 0.13 268.85)'
        },
    }
} satisfies TLineConfig;