Integracja Wykresu Słupkowego

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 Słupkowego

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

<div class="ravenbits-charts">
    <ravenbits-charts :options='{
        "chart": "bar",
        "data": {
            "categories": ["Q1", "Q2", "Q3", "Q4"],
            "series": [{
                    "name": "Przychód",
                    "values": [120, 150, 180, 210],
                    "color": "blue"
                },
                {
                    "name": "Koszty",
                    "values": [80, 100, 110, 130],
                    "color": "green"
                }
            ],
            "options": {
                "stacked": false,
                "horizontal": true,
                "showValues": true
            }
        }
    }'></ravenbits-charts>
</div>

Format Danych dla Wykresu Słupkowego

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

{
    "categories": ["Q1", "Q2", "Q3", "Q4"],
    "series": [
        {
            "name": "Przychód",
            "values": [120, 150, 180, 210],
            "color": "blue"
        },
        {
            "name": "Koszty",
            "values": [80, 100, 110, 130],
            "color": "green"
        }
    ],
    "options": {
        "stacked": false,
        "horizontal": true,
        "showValues": true
    }
}

Opcje Źródła Danych

Dane dla wykresu słupkowego możesz dostarczyć na trzy różne sposoby:

Opcja A: Inline JSON

"data": {
                "categories": ["Q1", "Q2", "Q3", "Q4"],
                "series": [{
                        "name": "Przychód",
                        "values": [120, 150, 180, 210],
                        "color": "blue"
                    },
                    {
                        "name": "Koszty",
                        "values": [80, 100, 110, 130],
                        "color": "green"
                    }
                ]
            }

Opcja B: Zewnętrzny Plik JSON

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

Format pliku JSON powinien być zgodny z wymaganą strukturą wykresu słupkowego.

Opcja C: Endpoint API

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

Endpoint API musi zwracać dane w formacie JSON zgodnym z wymaganą strukturą wykresu słupkowego.

Przykłady Zastosowania Wykresów Słupkowych

• Analiza sprzedaży - porównanie wyników sprzedaży w różnych okresach
• Porównanie metryk - zestawienie różnych wskaźników biznesowych
• Analiza demograficzna - porównanie danych demograficznych
• Rankingi - prezentacja rankingów, np. najlepiej sprzedających się produktów
• Analiza budżetu - zestawienie planowanych i rzeczywistych kosztów