Implementazione Grafico a Linee
I grafici a linee sono eccellenti per presentare tendenze nel tempo, confrontare più serie di dati e analizzare le variazioni di valore nei periodi successivi.
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 Linee
Posiziona il seguente codice HTML dove desideri visualizzare il grafico a linee:
<div class="ravenbits-charts">
<ravenbits-charts :options='{
"chart": "line",
"data": {
"categories": ["2020", "2021", "2022", "2023", "2024"],
"series": [{
"name": "Ricavi",
"data": [120, 150, 130, 180, 210],
"color": "#6366f1"
},
{
"name": "Costi",
"data": [80, 100, 95, 110, 130],
"color": "#14b8a6"
}
]
}
}'></ravenbits-charts>
</div>Formato Dati per Grafico a Linee
I tuoi dati JSON dovrebbero avere la seguente struttura:
{
"categories": ["2020", "2021", "2022", "2023", "2024"],
"series": [
{
"name": "Ricavi",
"data": [120, 150, 130, 180, 210],
"color": "#6366f1"
},
{
"name": "Costi",
"data": [80, 100, 95, 110, 130],
"color": "#14b8a6"
}
]
}Opzioni Grafico
Il campo "options" permette di personalizzare l'aspetto e il comportamento del grafico a linee:
"options": {
"showPoints": true, // true (predefinito) - mostra i punti dati
"showValues": false, // false (predefinito) - mostra sempre le etichette dei valori
"dashed": false // false (predefinito) - rende tutte le linee tratteggiate
}L'opzione "dashed" può anche essere impostata per serie per distinguere una linea specifica:
"series": [
{ "name": "...", "data": [...], "color": "#6366f1" },
{ "name": "...", "data": [...], "color": "#14b8a6", "dashed": true }
]Opzioni Fonte Dati
Puoi fornire dati per il grafico a linee in tre modi diversi:
Opzione A: JSON Inline
"data": {
"categories": ["2020", "2021", "2022", "2023", "2024"],
"series": [{
"name": "Ricavi",
"data": [120, 150, 130, 180, 210],
"color": "#6366f1"
}
]
}Opzione B: File JSON Esterno
"data": "https://ravenbits.it/line.json"Il formato del file JSON deve corrispondere alla struttura richiesta per il grafico a linee.
Opzione C: Endpoint API
"data": "https://ravenbits.it/api/lineChartSampleJson"L'endpoint API deve restituire dati in formato JSON conforme alla struttura richiesta per il grafico a linee.
Casi d'Uso del Grafico a Linee
- Analisi delle tendenze - visualizzazione delle variazioni di valore nel tempo
- Monitoraggio delle prestazioni - tracciamento dei KPI nei periodi successivi
- Confronto di serie - accostamento di più indicatori su un unico grafico
- Previsioni - presentazione di dati storici e proiezioni future
- Metriche aziendali - ricavi, costi e margine nel tempo