Sütun grafiği

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

Amaç

Bu bileşen, (yığılmış olanlar dahil) çubuk grafikler oluşturmanıza olanak tanır. Varsayılan olarak ızgara, eksenler, etiketler ve araç ipuçları (tooltip) etkinleştirilmiş şekilde gelir. Kaynak veriler data alanında bir dizi (array) olarak, görüntülenecek çubuklar ise series alanında bir nesne 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 özellikleri ile tanımlanır. Sütunları bir yığın (stack) içinde düzenlemek için, birden fazla seri için stack alanına aynı değeri atamanız gerekir. Mevcut tüm ayarları TBarConfig türünde (type) bulabilirsiniz.

Kullanım

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

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

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: '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 bileşeni olaylarını gözlemleyebilirsiniz
        const unobserve = observe((e) => {
            // olay işleyicisi
        }, ref.current);
        // ve takibi bırakabilirsiniz
        return () => unobserve();
    }, []);
    // JSX içinde web bileşeni kullanmanız yeterli
    return <div ref={ref}>
        <effcharts-bar>
            {config}
        </effcharts-bar>
    </div>;
}

Türler

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

import { HTMLAttributes } from 'react';
import { IBarChartAttrs, TBarConfig } from 'effcharts/bar';

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

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

// 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: 'Default',
            field: 'uv',
            color: 'oklch(0.49 0.13 268.85)'
        },
        sec: {
            title: 'Secondary',
            field: 'pv',
            color: 'oklch(0.61 0.1 213.72)'
        }
    }
} satisfies TBarConfig;