Integracja Wykresu Kołowego

Krok 1: Dołącz Skrypt

Dodaj następującą linię w sekcji head lub przed zamykającym tagiem body:

<script src="https://ravenbits.pl/build/ravenbits-charts.js" type="module"></script>

Krok 2: Dodaj Komponent Wykresu Kołowego

Umieść następujący kod HTML w miejscu, gdzie chcesz wyświetlić wykres kołowy:

<div class="ravenbits-charts">
    <ravenbits-charts :options='{
        "chart": "pie",
        "data": {
            "categories": ["Technologia", "Opieka zdrowotna", "Energia", "Finanse"],
            "values": [35, 25, 20, 20],
            "colors": ["#6366f1", "#14b8a6", "#f97316", "#9ca3af"]
        }
    }'></ravenbits-charts>
</div>

Format Danych dla Wykresu Kołowego

Twoje dane JSON powinny mieć następującą strukturę:

{
    "categories": ["Technologia", "Opieka zdrowotna", "Energia", "Finanse"],
    "values": [35, 25, 20, 20],
    "colors": ["#6366f1", "#14b8a6", "#f97316", "#9ca3af"]
}

Opcje Źródła Danych

Wybierz jedną z tych opcji, aby dostarczyć dane do wykresu:

Opcja A: Inline JSON

"data": {
    "categories": ["Technologia", "Opieka zdrowotna", "Energia", "Finanse"],
    "values": [35, 25, 20, 20],
    "colors": ["#6366f1", "#14b8a6", "#f97316", "#9ca3af"]
}

Opcja B: Zewnętrzny Plik JSON

"data": "https://ravenbits.pl/pie.json"

Opcja C: Endpoint API

"data": "https://ravenbits.pl/api/pieChartSampleJson"

Przykłady Zastosowania Wykresów Kołowych

• Struktura portfela inwestycyjnego - wizualizacja podziału aktywów według klas
• Segmentacja klientów - podział bazy klientów według demografii
• Analiza budżetu - prezentacja struktury przychodów lub wydatków
• Udziały rynkowe - porównanie udziałów różnych firm w rynku
• Źródła ruchu na stronie - wizualizacja kanałów pozyskiwania użytkowników