# Come incorporare grafici interattivi in NoteRich I dati sono valenti solo se si comprendono. Nello scenario della gestione della conoscenza personale, trasformare numeri grezzi e dati strutturati in informazioni visive è fondamentale. **NoteRich** colma il divario tra testo e dati, supportando nativamente **Apache ECharts**, permettendoti di incorporare grafici interattivi pronti per la pubblicazione direttamente nelle tue note. A differenza degli strumenti basati su cloud che inviano i dati su server esterni per la visualizzazione, **NoteRich** elabora e visualizza i grafici ECharts esclusivamente sul tuo dispositivo locale. Questo assicura che i tuoi dati rimangano 100% privati, offrendo al contempo un'esperienza di visualizzazione interattiva senza interruzioni. --- ## Perché ECharts in NoteRich? Apache ECharts è una libreria di visualizzazione open-source rinomata per la fluidità, la profondità e la compatibilità cross-platform. Incorporando ECharts in modo nativo, **NoteRich** offre diversi vantaggi: - **Visualizzazione senza codice**: Scrivi la configurazione JSON standard in un blocco di codice Markdown, e **NoteRich** lo visualizza immediatamente in un grafico interattivo. - **100% locale e privato**: Il motore di visualizzazione funziona localmente nel browser. I tuoi dati non lasciano mai il tuo dispositivo. - **Interattività avanzata**: Godi di funzionalità integrate come zoom, panning, tooltips e commutazione della legenda senza dover scrivere una singola riga di JavaScript. - **Generazione automatica grazie all’intelligenza artificiale**: L’intelligenza artificiale locale di **NoteRich** analizza le tue tabelle o le tue richieste in linguaggio naturale per generare automaticamente il codice JSON ECharts. --- ## I concetti di base: incorporare il primo grafico Incorporare un grafico in **NoteRich** è semplice: basta scrivere un blocco di codice Markdown. Devi solo specificare `echarts` come identificatore del linguaggio e fornire un oggetto JSON valido per le opzioni ECharts. ```echarts { "title": { "text": "Crescita local-focata delle note", "left": "center", "textStyle": { "color": "#000", "fontSize": 16 } }, "tooltip": { "trigger": "axis" }, "xAxis": { "type": "category", "data": ["Gen", "Feb", "Mar", "Apri", "Mag", "Jun"], "axisLabel": { "color": "#666" } }, "yAxis": { "type": "value", "splitLine": { "lineStyle": { "color": "#f4f4f5" } }, "axisLabel": { "color": "#666" } }, "series": [ { "data": [120, 200, 150, 80, 70, 110], "type": "bar", "itemStyle": { "color": "#000", "borderRadius": [4, 4, 0, 0] } } ], "grid": { "left": "10%", "right": "10%", "bottom": "15%" } } ``` Quando passi alla modalità di visualizzazione o leggi la nota, il motore di visualizzazione di **NoteRich** intercetta il blocco `echarts`, inizializza l’istanza ECharts e la collega al DOM, con capacità di ridimensionamento automatico. --- ## Approfondimento: configurazioni avanzate dei grafici Una volta padroneggiato i concetti di base, puoi utilizzare tutta la potenza di ECharts per creare visualizzazioni complesse e multidimensionali. ### 1. Grafici multi-serie e misti Puoi facilmente combinare diversi tipi di grafici, ad esempio sovrapponendo un grafico lineare su uno a barre, definendo più oggetti nell’array `series` e utilizzando due assi Y. ```echarts { "tooltip": { "trigger": "axis", "axisPointer": { "type": "cross" } }, "legend": { "data": ["Note createate", "Totale cumulativo"], "bottom": 0, "textStyle": { "color": "#666" } }, "xAxis": { "type": "category", "data": ["Luned", "Marted", "Merc", "Giov", "Vener", "Sab", "Domen"]}, "yAxis": [ { "type": "value", "name": "Giorno", "splitLine": { "lineStyle": { "color": "#f4f4f5" } }, "axisLabel": { "color": "#666" } }, { "type": "value", "name": "Totale", "splitLine": { "show": false }, "axisLabel": { "color": "#666" } } ], "series": [ { "name": "Note createate", "type": "bar", "data": [12, 18, 9, 22, 15, 30, 25], "itemStyle": { "color": "#eaeaea", "borderRadius": [4, 4, 0, 0] } }, { "name": "Totale cumulativo", "type": "line", "yAxisIndex": 1, "smooth": true, "data": [120, 138, 147, 169, 184, 214, 239], "lineStyle": { "color": "#000", "width": 3 }, "itemStyle": { "color": "#000" } } ], "grid": { "left": "10%", "right": "10%", "bottom": "15%" } } ``` ### 2. Grafici a piastre e a donut per la composizione Visualizzare proporzioni è semplice con la serie `pie` di ECharts. Puoi personalizzare il raggio per creare grafici a donut che si abbinano all'estetica minimalista di **NoteRich**. ```echarts { "tooltip": { "trigger": "item", "formatter": "{a} <br/>{b}: {c} ({d}%)" }, "legend": { "bottom": 0, "textStyle": { "color": "#666" } }, "series": [ { "name": "Utilizzo dello spazio", "type": "pie", "radius": ["40%", "70%"], "avoidLabelOverlap": false, "itemStyle": { "borderRadius": 10, "borderColor": "#fff", "borderWidth": 2 }, "label": { "show": false, "position": "center" }, "emphasis": { "label": { "show": true, "fontSize": 20, "fontWeight": "bold", "color": "#000" } }, "data": [ { "value": 1048, "name": "Note testuali", "itemStyle": { "color": "#000" } }, { "value": 735, "name": "Attachement", "itemStyle": { "color": "#666" } }, { "value": 580, "name": "Bazini", "itemStyle": { "color": "#eaeaea" } } ] } ] } ``` --- ## Visualizzazione alimentata dall’intelligenza artificiale: dal testo al grafico Scrivere il codice JSON manualmente è utile, ma **NoteRich** va oltre con il suo **Motore di visualizzazione AI locale**. Non è sempre necessario scrivere la configurazione manualmente. ### Linguaggio naturale a grafico Puoi descrivere semplicemente il grafico che desideri in inglese, e l’intelligenza artificiale locale di **NoteRich** genererà automaticamente il codice JSON ECharts per te. *Esempio di richiesta: "Creare un grafico radar che confronti le caratteristiche di NoteRich, Notion e Obsidian in termini di privacy, velocità, supporto offline e estensibilità."* ### Auto-detectzione da tabelle Se hai una tabella in Markdown nella tua nota, l’intelligenza artificiale di **NoteRich** può analizzare i dati strutturati e suggerire o generare automaticamente la configurazione ECharts corrispondente. Questo passaggio fluido da dati grezzi a informazioni visive avviene esclusivamente sul tuo dispositivo, assicurando che i tuoi dati analitici rimangano strettamente privati. --- ## Prestazioni e caricamento lenti Un problema comune quando si incorporano più grafici interattivi in un singolo documento è la prestazione. **NoteRich** risolve questo problema con un’architettura di caricamento lenta altamente ottimizzata. 1. **Observatore di intersezione**: I grafici non vengono visualizzati fino a quando non entrano nella finestra di visualizzazione. Questo riduce drasticamente il tempo di caricamento di documenti lunghi. 2. **Schemi di base**: Mentre un grafico viene caricato o inizializzato, viene visualizzato un UI leggero, evitando spostamenti di layout (CLS) e garantendo un’esperienza di lettura fluida. 3. **Ridimensionamento responsive**: **NoteRich** attacca automaticamente un `ResizeObserver` a ogni istanza ECharts, assicurando che i grafici si adattino correttamente al ridimensionamento della finestra o alla commutazione tra barre laterali senza intervento manuale. --- ## Best practice per ECharts in NoteRich Per sfruttare al massimo ECharts in **NoteRich**, tieni presente questi consigli: - **Assicura che il JSON sia valido**: Assicurati che la tua configurazione sia un JSON valido. **NoteRich** visualizzerà un messaggio di errore nel editor se la sintassi è errata, evitando crash dell’applicazione. - **Associa il tema**: L’UI di **NoteRich** è minimalista e monocromatica. Utilizza colori come `#000` (colore principale), `#666` (colore del testo secondario) e `#eaeaea` (bordi/backround) nelle tue configurazioni grafiche per mantenere armonia visiva. - **Usa `grid` per l’impaginazione**: Definisci sempre la proprietà `grid` per assicurarti che gli assi e le etichette del grafico abbiano abbastanza spazio e non vengano tagliati dai bordi del contenitore. - **Sfrutta l’intelligenza artificiale locale**: Per grafici complessi, lascia che l’intelligenza artificiale faccia il lavoro pesante. Puoi sempre modificare manualmente il codice JSON generato per apportare le correzioni necessarie. --- ## Conclusione Integrando la visualizzazione dei dati interattivi direttamente nel flusso di lavoro delle note elimina la necessità di passare da strumenti esterni come Excel o Tableau. Con il supporto nativo **ECharts**, **NoteRich** ti permette di trasformare la tua base di conoscenze locale in un dashboard dinamico, visivo e profondamente informativo – tutto questo mantenendo la privacy impegnativa e il principio di “local-focato” che desideri. Inizia ad incorporare i tuoi dati oggi stesso, e osserva come le tue note prendono vita. --- <div class="flex flex-wrap gap-2 mt-8 mb-12"> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">ECharts</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Visualizzazione dei dati</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Local-focato</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Alimentato dall’intelligenza artificiale</span> </div>