Grafico Candlestick 3D — Integrazione e Implementazione

Passo 1: Includi lo Script

Aggiungi la seguente riga nella sezione head o prima del tag di chiusura body:

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

Passo 2: Aggiungi il Componente Grafico Candlestick

Inserisci il seguente codice HTML nel punto in cui desideri visualizzare il grafico:

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

Formato Dati per il Grafico Candlestick

I tuoi dati JSON devono avere la seguente struttura — ogni candela è un oggetto con i campi 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}
    ]
}

Opzioni del Grafico

Il campo "options" consente di personalizzare i colori delle candele e la legenda:

"options": {
    "bullColor": "#14b8a6",  // colore della candela rialzista (close >= open)
    "bearColor": "#f97316",  // colore della candela ribassista (close < open)
    "bullLabel": "Rialzo",   // etichetta legenda rialzista (opzionale)
    "bearLabel": "Ribasso"    // etichetta legenda ribassista (opzionale)
}

Puoi anche impostare "color" per singola candela per evidenziare un periodo specifico:

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

Opzioni Sorgente Dati

Puoi fornire i dati in tre modi:

Opzione A: JSON Inline

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

Opzione B: File JSON Esterno

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

Il formato del file JSON deve corrispondere alla struttura richiesta dal grafico candlestick.

Opzione C: Endpoint API

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

L'endpoint API deve restituire dati in formato JSON conforme alla struttura richiesta dal grafico candlestick.

Esempi di Utilizzo dei Grafici Candlestick

• Mercato azionario — prezzi delle azioni nelle sessioni di trading
• Criptovalute — analisi della volatilità dei prezzi
• Mercato forex — tassi di cambio delle coppie valutarie
• Materie prime — prezzi di petrolio, oro, argento
• Analisi tecnica — identificazione di tendenze e formazioni