# Bagaimana Memasukkan Grafik Interaktif ke dalam NoteRich Data hanya seharusnya dihargai sejauh Anda mampu memahaminya. Dalam bidang Manajemen Pengetahuan Pribadi (PKM), mengubah angka mentah dan data terstruktur menjadi wawasan visual sangatlah penting. **NoteRich** menyambungkan teks dan data dengan mendukung **Apache ECharts** secara alami, memungkinkan Anda memasukkan grafik yang interaktif dan siap dipublikasikan langsung ke dalam catatan Anda. Berbeda dengan alat berbasis cloud yang mengirimkan data Anda ke server eksternal untuk diproses, **NoteRich** memproses dan memampas ECharts sepenuhnya di perangkat lokal Anda. Ini memastikan bahwa data milik Anda tetap 100% rahasia, sambil memberikan pengalaman visualisasi yang interaktif dan lancar. --- ## Mengapa ECharts dalam NoteRich? Apache ECharts adalah library visualisasi open-source yang terkenal dengan kelancaran, kedalaman, dan kompatibilitas antarmuka platformnya. Dengan mengintegrasikan ECharts secara alami, **NoteRich** menawarkan beberapa keunggulan: - **Rendering Tanpa Kode**: Tulis konfigurasi JSON standar dalam blok kode Markdown, dan **NoteRich** akan segera memampasnya menjadi grafik interaktif. - **100% Lokal & Rahasia**: Mesin pemampasan berjalan di perangkat lokal di browser Anda. Data Anda tidak pernah meninggalkan perangkat Anda. - **Interaktivitas yang Mendalam**: Nikmati fitur zooming, panning, tooltips, dan pengaturan legenda tanpa perlu menulis satu baris kode JavaScript pun. - **Generasi Berbasis AI**: Biarkan AI lokal **NoteRich** menganalisis tabel Anda atau permintaan bahasa alami untuk menghasilkan JSON ECharts secara otomatis. --- ## Dasar-Dasar: Memasukkan Grafik Pertama Anda Memasukkan grafik ke dalam **NoteRich** sangat mudah, cukup tulis blok kode Markdown. Anda hanya perlu menentukan `echarts` sebagai identifier bahasa dan memberikan objek JSON `option` ECharts yang valid. ```echarts { "title": { "text": "Pertumbuhan Catatan Lokal", "left": "center", "textStyle": { "color": "#000", "fontSize": 16 } }, "tooltip": { "trigger": "axis" }, "xAxis": { "type": "category", "data": ["Jan", "Feb", "Mar", "Apr", "May", "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%" } } ``` Ketika Anda beralih ke mode preview atau membaca catatan, mesin pemampasan **NoteRich** akan menangkap blok `echarts`, menginisialisasi instance ECharts, dan mengikatnya ke DOM dengan kemampuan penyesuaian ukuran secara otomatis. --- ## Penjelasan Lebih Lanjut: Konfigurasi Grafik Lanjutan Setelah Anda menguasai dasar-dasarnya, Anda dapat memanfaatkan potensi penuh ECharts untuk menciptakan visualisasi yang kompleks dan multidimensi. ### 1. Seri Multigrafik dan Grafik Campuran Anda dapat dengan mudah menggabungkan berbagai jenis grafik, seperti menumpuk grafik garis di atas grafik batang, dengan mendefinisikan beberapa objek dalam array `series` dan menggunakan dua sumbu Y. ```echarts { "tooltip": { "trigger": "axis", "axisPointer": { "type": "cross" } }, "legend": { "data": ["Catatan Dibuat", "Total Kumulatif"], "bottom": 0, "textStyle": { "color": "#666" } }, "xAxis": { "type": "category", "data": ["Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu", "Minggu"], "axisLabel": { "color": "#666" } }, "yAxis": [ { "type": "value", "name": "Hari", "splitLine": { "lineStyle": { "color": "#f4f4f5" } }, "axisLabel": { "color": "#666" } }, { "type": "value", "name": "Total", "splitLine": { "show": false }, "axisLabel": { "color": "#666" } } ], "series": [ { "name": "Catatan Dibuat", "type": "bar", "data": [12, 18, 9, 22, 15, 30, 25], "itemStyle": { "color": "#eaeaea", "borderRadius": [4, 4, 0, 0] } }, { "name": "Total Kumulatif", "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. Grafik Bagus dan Donut untuk Komposisi Visualisasi proporsi menjadi mudah dengan seri `pie` ECharts. Anda dapat menyesuaikan diameter untuk menciptakan grafik donut yang menarik yang sesuai dengan estetika minimalis **NoteRich**. ```echarts { "tooltip": { "trigger": "item", "formatter": "{a} <br/>{b}: {c} ({d}%)" }, "legend": { "bottom": 0, "textStyle": { "color": "#666" } }, "series": [ { "name": "Penggunaan Storage", "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": "Catatan Teks", "itemStyle": { "color": "#000" } }, { "value": 735, "name": "Attachment", "itemStyle": { "color": "#666" } }, { "value": 580, "name": "Database", "itemStyle": { "color": "#eaeaea" } } ] } ] } ``` --- ## Visualisasi Berbasis AI: Dari Teks ke Grafik Menulis JSON secara manual memang sangat berguna, tetapi **NoteRich** melangkah lebih jauh dengan **Mesin Visualisasi AI Lokal**nya. Anda tidak perlu selalu menulis konfigurasi sendiri. ### Bahasa Alami ke Grafik Anda dapat dengan mudah mendeskripsikan grafik yang Anda inginkan dalam bahasa Inggris yang sederhana, dan AI lokal **NoteRich** akan menghasilkan JSON ECharts untuk Anda. *Contoh Prompt: "Buat grafik radar yang membandingkan fitur NoteRich, Notion, dan Obsidian dalam hal Privasi, Kecepatan, Dukungan Offline, dan Keluwesan."* ### Deteksi Otomatis dari Tabel Jika Anda memiliki tabel Markdown dalam catatan Anda, AI **NoteRich** dapat menganalisis data terstruktur dan secara otomatis menyarankan atau menghasilkan konfigurasi ECharts yang sesuai. Transisi dari data mentah ke wawasan visual terjadi sepenuhnya di perangkat Anda, memastikan bahwa data analitis Anda tetap rahasia. --- ## Performa dan Pemuatan Cepat Kekhawatiran umum ketika memasukkan grafik interaktif dalam dokumen tunggal adalah performa. **NoteRich** mengatasi masalah ini dengan arsitektur **Pemuatan Cepat** yang sangat dioptimalkan. 1. **Intersection Observer**: Grafik tidak akan dipampas sampai mereka masuk ke bidang tampilan. Ini secara signifikan mengurangi waktu pemuatan awal dokumen yang panjang. 2. **Skeleton Screens**: Saat grafik sedang dipuaskan atau diinisialisasi, antarmuka ringan ditampilkan, mencegah pergeseran tata letak (CLS) dan mempertahankan pengalaman membaca yang lancar. 3. **Penyesuaian Ukuran Responsif**: **NoteRich** secara otomatis menambahkan `ResizeObserver` ke setiap instance ECharts, memastikan grafik beradaptasi dengan perubahan ukuran jendela atau pengaturan sisi panel tanpa intervensi manual. --- ## Praktik Terbaik untuk ECharts di NoteRich Untuk memaksimalkan penggunaan ECharts di **NoteRich**, ingatlah tips-tips berikut: - **Pastikan JSON Valid**: Pastikan konfigurasi Anda merupakan JSON yang valid. **NoteRich** akan menampilkan pesan kesalahan di editor jika sintaksnya tidak benar, mencegah crash aplikasi. - **sesuaikan dengan tema**: Antarmuka **NoteRich** adalah minimalis dan monokrom. Gunakan warna seperti `#000` (primary), `#666` (text sekunder), dan `#eaeaea` (batas/background) dalam konfigurasi grafik Anda untuk menjaga harmoni visual. - **Gunakan `grid` untuk Penempatan**: Selalu definisikan properti `grid` untuk memastikan sumbu grafik dan label Anda memiliki ruang yang cukup dan tidak terpotong oleh batas kontainer. - **Manfaatkan AI Lokal**: Untuk grafik yang kompleks, biarkan AI melakukan pekerjaan berat. Anda dapat selalu menyesuaikan JSON yang dihasilkan secara manual untuk penyempurnaan. --- ## Kesimpulan Mengintegrasikan visualisasi data interaktif ke dalam proses membuat catatan Anda langsung menghilangkan kebutuhan untuk beralih antar alat eksternal seperti Excel atau Tableau. Dengan dukungan **echarts** secara alami, **NoteRich** memberi Anda kemampuan untuk mengubah basis pengetahuan lokal Anda menjadi dashboard yang dinamis, visual, dan sangat informatif—semua ini dilakukan sambil mempertahankan privasi yang ketat dan filosofi lokal-terlebih dahulu yang Anda harapkan. Mulai memasukkan data Anda hari ini, dan lihatlah catatan Anda menjadi hidup. --- <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]">Visualisasi Data</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Lokal-First</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Berbasis AI</span> </div>