# כיצד להכניס איקרציטים אינטראקטיביים ל-NoteRich נתונים הם יקרים רק ככל שיש לך יכולת להבין אותם. בתחום ניהול ידע אישי, הפיכת מספרים גולמיים ונתונים מבניים לתובנות ויזואליות היא חשובה מאוד. **NoteRich** חוצה את הפער בין טקסט לנתונים, תוך תמיכה אוטונומית ב-**Apache ECharts**, מה שמאפשר להכניס איקרציטים אינטראקטיביים ומוכנים לשימוש מיד בתוך הערות שלך. בניגוד לכלים המבוססים על אשכולות ששולחים את הנתונים שלך לשרתים חיצוניים לצורך הצגה, **NoteRich** מעבד ומציג את האיקרציטים באופן מלא על המכשיר המקומי שלך. זה מבטיח שנתוניך יישארו פרטיים לחלוטין, תוך מתן חוויה ויזואלית אינטראקטיבית ללא תקלות. --- ## מדוע ECharts ב-NoteRich? **Apache ECharts** הוא ספריה אופנים לוויזואליזציה, המתהדר בפורטוגרניות, עומק ותמיכה ביותר ממכשירים שונים. על ידי שילוב אוטונומי של ECharts, **NoteRich** מציע מספר יתרונות: - **הצגה ללא כתיבה**: כתבו את ההגדרות הסטנדרטיות ב-JSON בבלוק קוד של Markdown, ו-NoteRich יציג אותן מיד כאיקרציטים אינטראקטיביים. - **100% מקומי ופרטי**: מנוע ההצגה פועל במערכת הברירת המקומית שלך. הנתונים שלך לא עוזבים את המכשיר שלך. - **אינטראקטיבות מתקדמת**: נהנה מאפשרויות רפלקסיביות כמו מעבר לגודל, סריקה, כותרות ושליטה בהצגה ללא צורך בכתיבה של שורה אחת של JavaScript. - **יצירה על ידי AI**: ה-AI המקומי של **NoteRich** יניתח את הטבלות שלך או את הפקודות בשפה הטבעית שלך, ויצר את הקובץ ECharts JSON באופן אוטומטי. --- ## הבסיס: הכנסת הצלב הראשון שלך להכניס צלב ב-NoteRich זה כמו לכתוב בלוק קוד של Markdown. צריך רק לציין את `echarts` כמאפיין של ההגדרות ולהציג את הקובץ ECharts JSON אפשרי בתוך הבלוק. ```echarts { "title": { "text": "גדילה של הערות מקומיות", "left": "center", "textStyle": { "color": "#000", "fontSize": 16 } }, "tooltip": { "trigger": "axis" }, "xAxis": { "type": "category", "data": ["ינואר", "פברואר", "מרץ", "אפריל", "מאי", "יוני"], "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. מספרות וצלבים מעורבים אתם יכולים לעבוד עם סוגים שונים של צלבים, כמו למשל הצגת צלב קווי על צלב סלים, על ידי הגדרת מספר אובייקטים במערך `series` ושימוש ביצירת צלבים עם שני צירי נתונים. ```echarts { "tooltip": { "trigger": "axis", "axisPointer": { "type": "cross" } }, "legend": { "data": ["ערות יוצרו", "סך הכל"], "bottom": 0, "textStyle": { "color": "#666" } }, "xAxis": { "type": "category", "data": ["יום שני", "יום שלישי", "יום רביעי", "יום חמישי", "יום שישי", "יום שבת", "יום ראשון"], "axisLabel": { "color": "#666" } }, "yAxis": [ { "type": "value", "name": "יומי", "splitLine": { "lineStyle": { "color": "#f4f4f5" } }, "axisLabel": { "color": "#666" } }, { "type": "value", "name": "סך הכל", "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. צלבים וריבועים לצורך שילוב אפשרות לצגת הרבהות באמצעות ECharts. אתם יכולים ליצור צלבים וריבועים מעורבים, ולהשתמש בצבעים כמו `#000` (צבע ראשי), `#666` (צבע טקסט משני) ו `#eaeaea` (צבע קירות/רקע) כדי לשמור על הרמוניה ויזואלית. ```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": "הערות", "itemStyle": { "color": "#666" } }, { "value": 580, "name": "בסיסי נתונים", "itemStyle": { "color": "#eaeaea" } } ] } ] } ``` --- ## ויזואליזציה על ידי AI: מטקסט לצלב כתיבת JSON באופן ידני היא יעילה, אך **NoteRich** מקדימה זאת עם מנוע הוויזואליזציה שלה. אתם לא צריכים תמיד לכתוב את ההגדרות בעצמכם. ### שימוש בשפה טבעית לצורך צלב אתם יכולים לתאר בפשטות את הצלב שאתם רוצים, ו-ML המקומי של **NoteRich** יגרום ליצירת הקובץ ECharts JSON עבורכם. *דוגמה לפקודה: "יצירת צלב רדאר שמשווה את היתרונות של NoteRich, Notion ו-Obsidian בכל הנוגע לפרטיות, מהירות, תמיכה בחשמל ונגישות."* ### זיהוי אוטומטי מטבלות אם יש לכם טבלה של מדינר בחרה של הערה, AI של **NoteRich** יכול לנתח את הנתונים המבניים ולהציע או ליצור אוטומטית את הקובץ ECharts שנדרש. זה מאפשר טרנספורמציה חלקית מהנתונים הגולמיים לתובנות ויזואליות, מבלי שיש צורך בהתערבות מצדכם. --- ## ביצועים ולוחצים לאט בעיות נפוצות כשמכניסים צלבים אינטראקטיביים רבים בתוך מסמך אחד הן קשורות לביצועים. **NoteRich** פותר את הבעיה באמצעות ארכיטקטורה של לוחצים לאט מאוד. 1. **תצפית אינטרסציה**: הצלבים אינם מוצגים עד שהם נכנסים לתוך הערוץ. זה מפחית באופן משמעותי את זמן ההגדרה של מסמכים ארוכים. 2. **צג של צלבים בצורת סטיקרים**: בזמן שהצלב מקבל תנועה או נבנה, נראה סטיקר קל שמפרק את הערכים של הצלב, וזה מבטיח חוויה קריאה חלקה. 3. **שינוי רפרסום אוטומטי**: **NoteRich** מחבר אוטומטית `ResizeObserver` לכל איקרציט ECharts, כך שהצלבים ישתנו באופן חלקי ללא צורך בהתערבות מצדכם. --- ## עקרונות הטובים ביותר לגבי ECharts ב-NoteRich כדי לנצל את היתרונות של ECharts ב-NoteRich, זכרו את העצה הבאה: - **ויזואליזציה ראויה**: ודאו שההגדרות שלכם הן JSON ראוי. **NoteRich** יוצג את ההודעה הלא נוחה בתיבת הדו-רכיבים אם הסינטקס שלכם לא תקין, כך שאין סכנה לקריסת האפליקט. - **תמיכה בתחום העיצוב**: העיצוב של UI של **NoteRich** הוא מינימליסטי וקולורלי. השתמש בצבעים כמו `#000` (צבע ראשי), `#666` (צבע טקסט משני) ו `#eaeaea` (צבע קירות/רקע) בהגדרות הצלב שלכם כדי לשמור על הרמוניה ויזואלית. - **שימוש בגרין-גריד לצורך פריסה**: תמיד הגדירו את הפרמטר `grid` כדי שהצלבים שלכם יהיו מספיק גדולים ושהצירים שלהם לא ייפרצו על ידי הערך של המכשיר. - **ניצול AI המקומי**: לצלבים מורכבים, נסו את AI המקומי. תמיד תוכלו לעדכן את הקובץ ECharts שנוצר אוטומטית על ידי כתיבה של שינויים קטנים. --- ## סיכום הכנסת ויזואליזציה של נתונים אינטראקטיביים ישירות לתהליך הקלט של הערות מאפשרת מחיקת הצורך לעבור בין כלים חיצוניים כמו Excel או Tableau. עם תמיכה אוטונומית ב-**ECharts**, **NoteRich** מאפשר לכם להפוך את הבסיס הידע שלכם למערכת ויזואלית ומעודכנת, תוך שמירה על הפרטיות והעקרונות של הלפני-מקומיות שאתם מעריכים. התחילו להכניס את הנתונים שלכם היום, וראו כיצד הערות שלכם נהפכות לחיים.