# วิธีการนำแผนภูมิแบบโต้ตอบมาแทรกใน NoteRich ข้อมูลมีค่ามากเพียงแค่คุณสามารถเข้าใจมันได้ ในด้านการจัดการความรู้ส่วนบุคคล (PKM) การแปลงตัวเลขดิบและข้อมูลที่มีโครงสร้างให้กลายเป็นข้อมูลที่สามารถมองเห็นได้นั้นมีความสำคัญมาก **NoteRich** ทำหน้าที่เป็นตัวเชื่อมระหว่างข้อความและข้อมูล โดยรองรับ **Apache ECharts** โดยตรง ทำให้คุณสามารถนำแผนภูมิแบบโต้ตอบมาแทรกได้โดยตรงในบันทึกของคุณ ต่างจากเครื่องมือที่ใช้ระบบคลาวด์ ซึ่งส่งข้อมูลไปยังเซิร์ฟเวอร์ภายนอกเพื่อการแสดงผล NoteRich จะประมวลผลและแสดงผล ECharts บนอุปกรณ์ของคุณเอง ซึ่งช่วยให้ข้อมูลส่วนตัวของคุณยังคงเป็นความลับ 100% พร้อมทั้งให้ประสบการณ์การมองเห็นข้อมูลที่ราบรื่นและโต้ตอบได้ --- ## ทำไมต้องใช้ ECharts ใน NoteRich? Apache ECharts เป็นไลบรารีการแสดงข้อมูลแบบโอเพนซอร์สที่มีชื่อเสียงในเรื่องความราบรื่น ความลึก และความสามารถในการทำงานร่วมกับหลายแพลตฟอร์ม โดยการผสาน ECharts เข้ากับ NoteRich จะช่วยให้คุณได้รับประโยชน์หลายประการ: - **การแสดงผลแบบไม่ต้องเขียนโค้ด**: เขียนคำสั่ง JSON แบบมาตรฐานในบล็อกโค้ด Markdown และ NoteRich จะแสดงผลเป็นแผนภูมิแบบโต้ตอบทันที - **การแสดงผลบนอุปกรณ์ของคุณเอง**: เครื่องมือการแสดงผลทำงานบนเบราว์เซอร์ของคุณเอง ข้อมูลของคุณจะไม่เคลื่อนย้ายออกจากอุปกรณ์ของคุณเลย - **ความสามารถในการโต้ตอบที่ยอดเยี่ยม**: คุณสามารถเพลิดเพลินกับการซูม การเลื่อน การแสดงข้อมูลเพิ่มเติม และการเปลี่ยนแปลงลูกศรได้โดยไม่ต้องเขียนโค้ด JavaScript เลย - **การสร้างแผนภูมิโดยใช้ AI**: ให้ AI ของ NoteRich วิเคราะห์ตารางหรือคำสั่งภาษาธรรมชาติของคุณเพื่อสร้าง JSON ของ ECharts เอง --- ## ขั้นพื้นฐาน: การนำแผนภูมิมาแทรกครั้งแรก การนำแผนภูมิมาแทรกใน NoteRich นั้นง่ายมาก เพียงแค่เขียนบล็อกโค้ด Markdown คุณเพียงแค่ต้องระบุว่า `echarts` เป็นตัวระบุภาษา และให้ค่าความถูกต้องของ ECharts `option` JSON object ไว้ข้างใน ```echarts { "title": { "text": "การเติบโตของบันทึกแบบ Local-First", "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%" } } ``` เมื่อคุณเปลี่ยนไปใช้โหมดการดูตัวอย่าง หรืออ่านบันทึก NoteRich จะจับค่าบล็อก `echarts` ไว้ และเริ่มต้นการทำงานของ ECharts พร้อมทั้งเชื่อมต่อกับ DOM ด้วยความสามารถในการปรับขนาดอัตโนมัติ --- ## การเจาะลึก: การกำหนดค่าแผนภูมิขั้นสูง เมื่อคุณเข้าใจพื้นฐานแล้ว คุณสามารถใช้ความสามารถของ ECharts อย่างเต็มที่เพื่อสร้างการแสดงข้อมูลที่ซับซ้อนและมีหลายมิติ ### 1. การรวมแผนภูมิหลายตัวและแผนภูมิที่มีหลายมิติ คุณสามารถรวมประเภทแผนภูมิที่แตกต่างกันได้อย่างง่ายดาย เช่น การนำแผนภูมิเส้นมาประกอบกับแผนภูมิแท่ง โดยการกำหนดวัตถุหลายตัวใน array `series` และใช้ Y-axes สองตัว ```echarts { "tooltip": { "trigger": "axis", "axisPointer": { "type": "cross" } }, "legend": { "data": ["บันทึกที่สร้างขึ้น", "จำนวนรวม"], "bottom": 0, "textStyle": { "color": "#666" } }, "xAxis": { "type": "category", "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], "axisLabel": { "color": "#666" } }, "yAxis": [ { "type": "value", "name": "Daily", "splitLine": { "lineStyle": { "color": "#f4f4f5" } }, "axisLabel": { "color": "#666" } }, { "type": "value", "name": "Total", "splitLine": { "show": false }, "axisLabel": { "color": "#666" } } ], "series": [ { "name": "บันทึกที่สร้างขึ้น", "type": "bar", "data": [12, 18, 9, 22, 15, 30, 25], "itemStyle": { "color": "#eaeaea", "borderRadius": [4, 4, 0, 0] } }, { "name": "จำนวนรวม", "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. การใช้แผนภูมิแบบทรงกลมและแผนภูมิแบบโดนัทเพื่อการสร้างการแสดงข้อมูล การแสดงข้อมูลเปอร์เซ็นต์นั้นง่ายมากด้วย `pie` series ของ ECharts คุณสามารถปรับแต่งรัศมีได้เพื่อสร้างแผนภูมิแบบโดนัทที่สวยงามที่เข้ากันได้กับสไตล์ของ NoteRich ```echarts { "tooltip": { "trigger": "item", "formatter": "{a} <br/>{b}: {c} ({d}%)" }, "legend": { "bottom": 0, "textStyle": { "color": "#666" } }, "series": [ { "name": "การใช้งานพื้นที่", "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": "บันทึกข้อความ", "itemStyle": { "color": "#000" } }, { "value": 735, "name": "Attachment", "itemStyle": { "color": "#666" } }, { "value": 580, "name": "ฐานข้อมูล", "itemStyle": { "color": "#eaeaea" } } ] } ] } ``` --- ## การแสดงข้อมูลด้วย AI: จากข้อความไปสู่แผนภูมิ การเขียน JSON ด้วยมือนั้นมีประสิทธิภาพ แต่ NoteRich จะนำความสามารถนี้ไปอีกขั้นด้วย **Engine AI บนอุปกรณ์ของคุณเอง**. คุณไม่จำเป็นต้องเขียนคำสั่งเองตลอดเวลา ### การอธิบายแผนภูมิด้วยภาษาธรรมชาติ คุณสามารถอธิบายแผนภูมิที่คุณต้องการได้ด้วยภาษาธรรมชาติ และ AI ของ NoteRich จะสร้าง JSON ของ ECharts ให้คุณเอง *ตัวอย่างคำสั่ง: "สร้างแผนภูมิแบบเรดาร์ที่เปรียบเทียบคุณสมบัติของ NoteRich, Notion, และ Obsidian ในด้านความเป็นส่วนตัว, ความเร็ว, บริการหลังการใช้งาน, และความสามารถในการใช้งาน"* ### การตรวจจับข้อมูลจากตาราง หากคุณมีตารางในบันทึกของคุณ NoteRich จะสามารถวิเคราะห์ข้อมูลที่มีโครงสร้างได้ และเสนอหรือสร้างคำสั่ง ECharts ที่เหมาะสมให้คุณเอง การเปลี่ยนจากข้อมูลดิบไปสู่การมองเห็นข้อมูลนั้นเกิดขึ้นบนอุปกรณ์ของคุณเอง ทำให้ข้อมูลการวิเคราะห์ของคุณยังคงเป็นความลับ --- ## ประสิทธิภาพและการโหลดแบบช้าๆ หนึ่งในปัญหาที่พบบ่อยเมื่อนำแผนภูมิแบบโต้ตอบมาแทรกในเอกสารเดียวคือประสิทธิภาพของการโหลดข้อมูล NoteRich มีวิธีแก้ปัญหานี้ด้วย **Architecture การโหลดแบบช้าๆ** ที่ได้รับการปรับแต่งอย่างดี 1. **การใช้ Intersection Observer**: แผนภูมิจะไม่ถูกแสดงผลจนกว่าจะเคลื่อนไปถึงหน้าจอ นี้ช่วยลดเวลาในการโหลดข้อมูลของเอกสารที่มีขนาดยาวได้อย่างมาก 2. **การแสดงผลแบบ Skeleton**: ในขณะที่แผนภูมิกำลังโหลดหรือเริ่มต้น การแสดงผลแบบ Skeleton จะถูกแสดงขึ้นมา เพื่อป้องกันการเปลี่ยนตำแหน่งของแผนภูมิ (CLS) และรักษาประสบการณ์การอ่านที่ราบรื่น 3. **การปรับขนาดแบบยืดหยุ่น**: NoteRich จะเชื่อมต่อกับ `ResizeObserver` กับตัวแผนภูมิ ECharts ทุกตัว เพื่อให้แผนภูมิสามารถปรับขนาดได้อย่างราบรื่นโดยไม่ต้องแทรกแซง --- ## วิธีการใช้ ECharts ใน NoteRich ที่ดีที่สุด เพื่อให้ได้ประสิทธิภาพสูงสุดจาก ECharts ใน NoteRich คุณควรคำนึงถึงเคล็ดลับต่อไปนี้: - **ตรวจสอบความถูกต้องของ JSON**: ตรวจสอบให้แน่ใจว่าคำสั่งของคุณเป็น JSON ที่ถูกต้อง NoteRich จะแสดงข้อความแสดงข้อผิดพลาดในตัวแก้ไขหากโครงสร้างไม่ถูกต้อง ซึ่งช่วยป้องกันการเกิดข้อผิดพลาดของแอปพลิเคชัน - **เลือกสีที่เหมาะสม**: หน้าจอของ NoteRich เป็นสไตล์ที่เรียบง่ายและมีสีเดียว ใช้สีอย่างเช่น `#000` (สีหลัก), `#666` (สีสำหรับข้อความรอง), และ `#eaeaea` (สีสำหรับขอบ/พื้นหลัง) ในการกำหนดค่าของแผนภูมิของคุณเพื่อรักษาความสอดคล้องกันของการมองเห็น - **ใช้ `grid` เพื่อการปรับขนาด**: กำหนดค่า `grid` ตลอดเวลาเพื่อให้แน่ใจว่าคุณมีพื้นที่เพียงพอสำหรับแกนและตัวระบุข้อมูลของคุณ และไม่ถูกขัดข้องโดยขอบของคอนเทนเนอร์ - **ใช้ AI บนอุปกรณ์ของคุณเอง**: สำหรับแผนภูมิที่ซับซ้อน ให้ AI เป็นผู้จัดการการสร้างแผนภูมิ คุณสามารถปรับแต่ง JSON ที่สร้างขึ้นมาเองได้ตลอดเวลาเพื่อการปรับแต่ง --- ## สรุป การผสานการแสดงข้อมูลแบบโต้ตอบเข้ากับกระบวนการทำบันทึกของคุณจะช่วยให้คุณไม่จำเป็นต้องเปลี่ยนจากเครื่องมือภายนอกอย่าง Excel หรือ Tableau ด้วยการรองรับ ECharts โดยตรง NoteRich จะช่วยให้คุณสามารถเปลี่ยนฐานความรู้ส่วนตัวของคุณให้กลายเป็นแดชบอร์ดที่มีความสามารถในการมองเห็นและมีความลึกซึ้งได้ พร้อมทั้งรักษาความเป็นส่วนตัวและหลักการที่เรียบง่ายของคุณไว้ เริ่มนำข้อมูลมาแทรกในบันทึกของคุณได้เลย และดูว่าบันทึกของคุณจะมีชีวิตชีวาขึ้นมาได้อย่างไร --- <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]">การแสดงข้อมูล</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Local-First</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">AI-Powered</span> </div>