Integrazione Grafico a Torta

Passo 1: Includi lo Script

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

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

Passo 2: Aggiungi il Componente Grafico a Torta

Posiziona il seguente codice HTML dove desideri visualizzare il grafico a torta:

<div class="ravenbits-charts">
    <ravenbits-charts :options='{
        "chart": "pie",
        "data": {
            "categories": ["Tecnologia", "Sanità", "Energia", "Finanza"],
            "values": [35, 25, 20, 20],
            "colors": ["#6366f1", "#14b8a6", "#f97316", "#9ca3af"]
        }
    }'></ravenbits-charts>
</div>

Formato Dati per Grafico a Torta

I tuoi dati JSON dovrebbero avere la seguente struttura:

{
    "categories": ["Tecnologia", "Sanità", "Energia", "Finanza"],
    "values": [35, 25, 20, 20],
    "colors": ["#6366f1", "#14b8a6", "#f97316", "#9ca3af"]
}

Opzioni Fonte Dati

Scegli una di queste opzioni per fornire dati al grafico:

Opzione A: JSON Inline

"data": {
    "categories": ["Tecnologia", "Sanità", "Energia", "Finanza"],
    "values": [35, 25, 20, 20],
    "colors": ["#6366f1", "#14b8a6", "#f97316", "#9ca3af"]
}

Opzione B: File JSON Esterno

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

Opzione C: Endpoint API

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

Casi d'Uso del Grafico a Torta

• Struttura del portafoglio di investimenti - visualizzazione dell'allocazione degli asset per classe
• Segmentazione dei clienti - divisione della base clienti per dati demografici
• Analisi del budget - presentazione della struttura delle entrate o delle spese
• Quote di mercato - confronto delle quote di diverse aziende nel mercato
• Fonti di traffico del sito web - visualizzazione dei canali di acquisizione utenti