Wykres Liniowy 3D — Integracja i Implementacja (Line Chart)

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 Liniowego

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

<div class="ravenbits-charts">
    <ravenbits-charts :options='{
        "chart": "line",
        "data": {
            "categories": ["2020", "2021", "2022", "2023", "2024"],
            "series": [{
                    "name": "Przychód",
                    "data": [120, 150, 130, 180, 210],
                    "color": "#6366f1"
                },
                {
                    "name": "Koszty",
                    "data": [80, 100, 95, 110, 130],
                    "color": "#14b8a6"
                }
            ]
        }
    }'></ravenbits-charts>
</div>

Format Danych dla Wykresu Liniowego

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

{
    "categories": ["2020", "2021", "2022", "2023", "2024"],
    "series": [
        {
            "name": "Przychód",
            "data": [120, 150, 130, 180, 210],
            "color": "#6366f1"
        },
        {
            "name": "Koszty",
            "data": [80, 100, 95, 110, 130],
            "color": "#14b8a6"
        }
    ]
}

Opcje Wykresu

Pole "options" pozwala dostosować wygląd i zachowanie wykresu liniowego:

"options": {
    "showPoints": true,   // true (domyślnie) - pokaż punkty danych
    "showValues": false,  // false (domyślnie) - zawsze pokazuj wartości
    "dashed": false       // false (domyślnie) - wszystkie linie przerywane
}

Opcję "dashed" można też ustawić per-seria, żeby wyróżnić konkretną linię:

"series": [
    { "name": "...", "data": [...], "color": "#6366f1" },
    { "name": "...", "data": [...], "color": "#14b8a6", "dashed": true }
]

Opcje Źródła Danych

Dane dla wykresu liniowego możesz dostarczyć na trzy różne sposoby:

Opcja A: Inline JSON

"data": {
    "categories": ["2020", "2021", "2022", "2023", "2024"],
    "series": [{
            "name": "Przychód",
            "data": [120, 150, 130, 180, 210],
            "color": "#6366f1"
        }
    ]
}

Opcja B: Zewnętrzny Plik JSON

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

Format pliku JSON powinien być zgodny z wymaganą strukturą wykresu liniowego.

Opcja C: Endpoint API

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

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

Przykłady Zastosowania Wykresów Liniowych

• Analiza trendów - wizualizacja zmian wartości w czasie
• Monitorowanie wydajności - śledzenie wskaźników KPI w kolejnych okresach
• Porównanie serii - zestawienie wielu wskaźników na jednym wykresie
• Prognozowanie - prezentacja danych historycznych i prognoz
• Metryki biznesowe - przychody, koszty i marża w czasie