feat(图表): 为价格对比图和差异图添加缩放功能及重置按钮

添加chartjs-plugin-zoom插件支持图表缩放功能
为两个图表添加重置缩放按钮
配置缩放和拖拽交互选项

src/dashboard/static/index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Lead-Lag 数据面板</title>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.1/dist/chartjs-plugin-zoom.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
     <style>
         * {
@@ -368,18 +369,22 @@
                         </div>
 
                         <div class="chart-container">
-                            <h3>价格对比图</h3>
-                            <div class="chart-wrapper">
-                                <canvas id="priceChart"></canvas>
-                            </div>
-                        </div>
+                    <h3>价格对比图 
+                        <button class="btn" style="float: right; padding: 8px 16px; font-size: 0.8em; margin-top: -5px;" onclick="resetPriceChartZoom()">重置缩放</button>
+                    </h3>
+                    <div class="chart-wrapper">
+                        <canvas id="priceChart"></canvas>
+                    </div>
+                </div>
 
-                        <div class="chart-container">
-                            <h3>价格差异图</h3>
-                            <div class="chart-wrapper">
-                                <canvas id="diffChart"></canvas>
-                            </div>
-                        </div>
+                <div class="chart-container">
+                    <h3>价格差异图
+                        <button class="btn" style="float: right; padding: 8px 16px; font-size: 0.8em; margin-top: -5px;" onclick="resetDiffChartZoom()">重置缩放</button>
+                    </h3>
+                    <div class="chart-wrapper">
+                        <canvas id="diffChart"></canvas>
+                    </div>
+                </div>
                     </div>
 
                     <div id="lastUpdate" class="last-update" style="display: none;"></div>
@@ -683,6 +688,21 @@
                         legend: {
                             position: 'top'
                         },
+                        zoom: {
+                            zoom: {
+                                wheel: {
+                                    enabled: true,
+                                },
+                                pinch: {
+                                    enabled: true
+                                },
+                                mode: 'x',
+                            },
+                            pan: {
+                                enabled: true,
+                                mode: 'x',
+                            }
+                        },
                         tooltip: {
                             mode: 'index',
                             intersect: false,
@@ -779,6 +799,21 @@
                         legend: {
                             position: 'top'
                         },
+                        zoom: {
+                            zoom: {
+                                wheel: {
+                                    enabled: true,
+                                },
+                                pinch: {
+                                    enabled: true
+                                },
+                                mode: 'x',
+                            },
+                            pan: {
+                                enabled: true,
+                                mode: 'x',
+                            }
+                        },
                         tooltip: {
                             mode: 'index',
                             intersect: false,
@@ -893,6 +928,19 @@
             const shanghaiTime = now.toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai' });
             document.getElementById('lastUpdate').textContent = `最后更新: ${shanghaiTime}`;
         }
+
+        // 重置图表缩放的函数
+        function resetPriceChartZoom() {
+            if (priceChart) {
+                priceChart.resetZoom();
+            }
+        }
+
+        function resetDiffChartZoom() {
+            if (diffChart) {
+                diffChart.resetZoom();
+            }
+        }
     </script>
 </body>
 </html>