Przewodnik Integracji

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

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

<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>

Krok 3: 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"

Dostępne Typy Wykresów

RavenBits oferuje różne typy wykresów. Sprawdź nasze szczegółowe poradniki: