# NoteRichにインタラクティブなEChartsを埋め込む方法 データの価値は、そのデータを理解する能力にかかっています。個人知識管理（PKM）の分野では、生の数字や構造化されたデータを視覚的な洞察に変換することが重要です。**NoteRich**は、**Apache ECharts**をネイティブにサポートし、ノート内に完全にインタラクティブなチャートを埋め込むことができます。 外部サーバーにデータを送信してレンダリングするクラウドベースのツールとは異なり、**NoteRich**は、EChartsをすべてローカルデバイス上で処理し、レンダリングします。これにより、お客様のデータは100％プライベートでありながら、シームレスでインタラクティブなビジュアライゼーション体験を提供できます。 --- ## なぜNoteRichにEChartsなのか？ Apache EChartsは、その流動性、深さ、そしてクロスプラットフォームの互換性で知られるオープンソースのビジュアライゼーションライブラリです。EChartsをネイティブに統合することで、**NoteRich**は以下のような利点を提供します： - **ゼロコードレンダリング**：Markdownコードブロック内で標準的なJSON設定を記述し、NoteRichは即座にインタラクティブチャートに変換します。 - **100％ローカルかつプライベート**：レンダリングエンジンはブラウザ内でローカルに実行されます。データはデバイスから一切抜けません。 - **リッチなインタラクティビティ**：ズーム、パン、ツールチップ、凡例の切り替え機能が内蔵されており、JavaScriptの一行も書く必要がありません。 - **AIによる生成**：NoteRichのローカルAIがテーブルや自然言語のプロンプトを分析し、自動的にECharts JSONを生成します。 --- ## 基本操作：最初のチャートの埋め込み NoteRichにチャートを埋め込むのは、Markdownコードブロックを記述するだけです。ただし、`echarts`を言語識別子として指定し、有効なECharts `option` JSONオブジェクトを提供する必要があります。 ```echarts { "title": { "text": "ローカル最優先のノート成長", "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. 複数のシリーズと混合チャート `series`配列に複数のオブジェクトを定義し、デュアルY軸を利用することで、線チャートとバーチャートを簡単に組み合わせることができます。 ```echarts { "tooltip": { "trigger": "axis", "axisPointer": { "type": "cross" } }, "legend": { "data": ["Notes Created", "Cumulative Total"], "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": "Notes Created", "type": "bar", "data": [12, 18, 9, 22, 15, 30, 25], "itemStyle": { "color": "#eaeaea", "borderRadius": [4, 4, 0, 0] } }, { "name": "Cumulative Total", "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の`pie`シリーズを使用すると、比率を視覚化するのが簡単です。ドーナツチャートを作成するには、円の半径をカスタマイズするだけで、NoteRichのミニマリストなスタイルに合わせた見事なドーナツチャートを作成できます。 ```echarts { "tooltip": { "trigger": "item", "formatter": "{a} <br/>{b}: {c} ({d}%)" }, "legend": { "bottom": 0, "textStyle": { "color": "#666" } }, "series": [ { "name": "Storage Usage", "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": "Text Notes", "itemStyle": { "color": "#000" } }, { "value": 735, "name": "Attachments", "itemStyle": { "color": "#666" } }, { "value": 580, "name": "Databases", "itemStyle": { "color": "#eaeaea" } } ] } ] } ``` --- ## AIによるビジュアライゼーション：テキストからチャートへ JSONを手動で書くのは便利ですが、**NoteRich**はその一歩を進め、**ローカルAIビジュアライゼーションモジュール**を提供します。常に設定を手動で書く必要はありません。 ### 自然言語からチャートへ 簡単に、希望するチャートを平易な英語で記述するだけで、NoteRichのローカルLLMが自動的にECharts JSONを生成します。 *例プロンプト： "Create a radar chart comparing the features of NoteRich, Notion, and Obsidian across Privacy, Speed, Offline Support, and Extensibility."* ### テーブルからの自動検出 ノート内にMarkdownテーブルがある場合、**NoteRich**のAIが構造化されたデータを分析し、対応するECharts設定を自動的に提案または生成します。これにより、生のデータから視覚的な洞察へとシームレスに移行でき、分析データが完全にプライベートであることを保証します。 --- ## パフォーマンスと遅延読み込み 1つの文書内に複数のインタラクティブチャートを埋め込む際の一般的な懸念事項は、パフォーマンスです。**NoteRich**は、高度に最適化された**遅延読み込みアーキテクチャ**でこの問題を解決します。 1. **インターセクションオブザーバー**：チャートは、ビューポイントにスクロールされるまでレンダリングされません。これにより、長い文書の初期読み込み時間が大幅に短縮されます。 2. **スケルトンメニュー**：チャートが読み込まれている間、軽量なスケルトンUIが表示され、レイアウトのずれを防ぎ、スムーズな読み取り体験を維持します。 3. **応答性のあるサイズ調整**：NoteRichは、すべてのEChartsインスタンスに自動的に`ResizeObserver`を付与し、ウィンドウのサイズ調整やサイドバーの切り替えに自動的に適応します。 --- ## NoteRich EChartsのベストプラクティス NoteRich内でEChartsを最大限に活用するためのヒントを以下に示します： - **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]">ローカル最優先</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">AIによる</span> </div>