Pasta grafiği

{"data":[{"name":"Page A","uv":4000,"pv":2400,"color":"oklch(0.61 0.1 213.72)"},{"name":"Page B","uv":3000,"pv":1398,"color":"oklch(0.54 0.18 322.34)"},{"name":"Page C","uv":2000,"pv":9800,"color":"oklch(0.49 0.13 268.85)"}],"series":{"def":{"field":"uv","color":"color","title":"Default","inner":0.55,"outer":1},"sec":{"field":"pv","color":"color","title":"Secondary","outer":0.5,"angle":180}}}

Amaç

Bu bileşen, pasta ve halka (donut) grafikler oluşturmanıza olanak tanır. Varsayılan olarak araç ipucu (tooltip) özelliği etkindir. Kaynak veriler data alanında bir dizi (array) olarak, görüntülenecek gruplar ise series alanında bir nesne (object) olarak aktarılır. Dilim boyutu ve renk özellikleri, series içindeki sırasıyla field ve color alanlarıyla tanımlanır. Halka grafik dilimleri oluşturmak için series içerisinde inner ve outer alanlarını belirlemeniz gerekir; bunlar sırasıyla iç ve dış yarıçapları ayarlar. Mevcut tüm ayarları TPieConfig türünde (type) bulabilirsiniz.

Kullanım

import { useState, useEffect } from 'react';
import { usePie } from 'effcharts/pie';

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

export const App = () => {
    const ref = useRef();
    const [config, setConfig] = useState(JSON.stringify({
        data: [
            {
                name: 'Page A',
                uv: 4000,
                pv: 2400,
                color: 'oklch(0.61 0.1 213.72)'
            },
            {
                name: 'Page B',
                uv: 3000,
                pv: 1398,
                color: 'oklch(0.54 0.18 322.34)'
            },
            {
                name: 'Page C',
                uv: 2000,
                pv: 9800,
                color: 'oklch(0.49 0.13 268.85)'
            }
        ],
        series: {
            def: {
                field: 'uv',
                color: 'color',
                title: 'Default',
                inner: 0.55,
                outer: 1
            },
            sec: {
                field: 'pv',
                color: 'color',
                title: 'Secondary',
                outer: 0.5,
                angle: 180
            }
        }
    }));
    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-pie>
            {config}
        </effcharts-pie>
    </div>;
}

Türler

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

import { HTMLAttributes } from 'react';
import { IPieChartAttrs, TPieConfig } from 'effcharts/pie';

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

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

// yapılandırmayı hazırla
const config = {
    data: [
        {
            name: 'Page A',
            uv: 4000,
            pv: 2400,
            color: 'oklch(0.61 0.1 213.72)'
        },
        {
            name: 'Page B',
            uv: 3000,
            pv: 1398,
            color: 'oklch(0.54 0.18 322.34)'
        },
        {
            name: 'Page C',
            uv: 2000,
            pv: 9800,
            color: 'oklch(0.49 0.13 268.85)'
        }
    ],
    series: {
        def: {
            field: 'uv',
            color: 'color',
            title: 'Default',
            inner: 0.55,
            outer: 1
        },
        sec: {
            field: 'pv',
            color: 'color',
            title: 'Secondary',
            outer: 0.5,
            angle: 180
        }
    }
} satisfies TPieConfig;