Wykres Świecowy 3D — Integracja i Implementacja (Candlestick 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 Świecowego

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

<div class="ravenbits-charts">
    <ravenbits-charts :options='{
        "chart": "candlestick",
        "data": {
            "categories": ["Sty", "Lut", "Mar", "Kwi", "Maj"],
            "series": [
                {"open": 100, "high": 118, "low": 95,  "close": 112},
                {"open": 112, "high": 125, "low": 108, "close": 105},
                {"open": 105, "high": 115, "low": 98,  "close": 113},
                {"open": 113, "high": 130, "low": 110, "close": 128},
                {"open": 128, "high": 135, "low": 120, "close": 122}
            ]
        }
    }'></ravenbits-charts>
</div>

Format Danych dla Wykresu Świecowego

Twoje dane JSON powinny mieć następującą strukturę — każda świeca to obiekt z polami open, high, low, close:

{
    "categories": ["Sty", "Lut", "Mar", "Kwi", "Maj"],
    "series": [
        {"open": 100, "high": 118, "low": 95,  "close": 112},
        {"open": 112, "high": 125, "low": 108, "close": 105},
        {"open": 105, "high": 115, "low": 98,  "close": 113},
        {"open": 113, "high": 130, "low": 110, "close": 128},
        {"open": 128, "high": 135, "low": 120, "close": 122}
    ]
}

Opcje Wykresu

Pole "options" pozwala dostosować kolory świec i legendę:

"options": {
    "bullColor": "#14b8a6",  // kolor świecy wzrostowej (close >= open)
    "bearColor": "#f97316",  // kolor świecy spadkowej (close < open)
    "bullLabel": "Wzrost",   // etykieta legendy wzrostu (opcjonalnie)
    "bearLabel": "Spadek"    // etykieta legendy spadku (opcjonalnie)
}

Opcję "color" można też ustawić per-świeca, żeby wyróżnić konkretny okres:

"series": [
    {"open": 100, "high": 118, "low": 95, "close": 112, "color": "#6366f1"},
    {"open": 112, "high": 125, "low": 108, "close": 105}
]

Opcje Źródła Danych

Dane możesz dostarczyć na trzy sposoby:

Opcja A: Inline JSON

"data": {
    "categories": [...],
    "series": [{"open": ..., "high": ..., "low": ..., "close": ...}, ...]
}

Opcja B: Zewnętrzny Plik JSON

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

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

Opcja C: Endpoint API

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

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

Przykłady Zastosowania Wykresów Świecowych

• Notowania giełdowe — ceny akcji w kolejnych sesjach
• Kryptowaluty — analiza zmienności cen
• Rynek walutowy — kursy par walutowych
• Surowce — ceny ropy, złota, srebra
• Analiza techniczna — identyfikacja trendów i formacji