Çizgi grafik

{"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)"}}}

Amaç

Bu bileşen, çizgi grafikleri ve alan grafikleri oluşturmanıza olanak tanır. Varsayılan olarak; ızgara (grid), eksenler, etiketler ve araç ipuçları (tooltip) etkinleştirilmiş şekilde gelir. Kaynak veriler data alanında bir dizi (array) olarak, görüntülenecek eğriler ise series alanında bir nesne (object) olarak aktarılır. Varsayılan durumda, data nesnesi içindeki name alanı, ilgili etiketi oluşturmak için kullanılır. Sütun boyutu ve rengi, series içindeki sırasıyla field ve color alanlarıyla tanımlanır. Çizgilerin yumuşatılması ise smooth alanı ile kontrol edilir. Varsayılan olarak, çizginin altındaki alan renklendirilir; area alanına false değerini vererek bu özelliği devre dışı bırakabilir veya farklı bir dolgu yönü (max, min ve zero seçenekleri mevcuttur) belirleyebilirsiniz. Mevcut tüm ayarları TLineConfig türünde (type) bulabilirsiniz.

Kullanım

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

// Kullanmadan önce özel web bileşenini tanımlayın
// SSR için, tarayıcı belge gövdesini ayrıştırmadan önce çağırmanız gerektiğini unutmayın
// bu nedenle belge başlığına ayrı bir tanımlama betiği eklemeniz gerekebilir
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 bileşeni olaylarını gözlemleyebilirsiniz
        const unobserve = observe((e) => {
            // olay işleyicisi
        }, ref.current);
        // ve gözlemi sonlandırabilirsiniz
        return () => unobserve();
    }, []);
    // JSX içinde web bileşeni kullanmanız yeterli
    return <div ref={ref}>
        <effcharts-line>
            {config}
        </effcharts-line>
    </div>;
}

Türler

ILineChartAttrs arayüzünü kullanarak bir web bileşeni tanımlayabilirsiniz. Ayrıca TLineConfig türünü kullanarak grafik yapılandırmasını doğrulayabilirsiniz.

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

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

// effcharts bileşenlerini tanımla
declare module 'react' {
  namespace JSX {
    interface IntrinsicElements {
        'effcharts-line': CustomElement<ILineChartAttrs>;
    }
  }
}

// yapılandırmayı hazırla
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;