图表缩放

app/records/[id]/page.tsx

@@ -11,9 +11,10 @@ import {
   Tooltip,
   Legend,
 } from 'chart.js'
+import zoomPlugin from 'chartjs-plugin-zoom'
 import { Line, Bar, Scatter } from 'react-chartjs-2'
 
-ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, BarElement, Tooltip, Legend)
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, BarElement, Tooltip, Legend, zoomPlugin)
 
 type Detail = {
   id: string
@@ -88,7 +89,6 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) {
     const dataToUse = enableEma ? smoothedCode : (rec?.code || [])
     return buildHistogram(dataToUse, 30)
   }, [rec, enableEma, smoothedCode])
-  const forceHistogram = useMemo(() => buildHistogram(forceSeries || [], 30), [forceSeries])
 
   return (
     <div className="min-h-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-zinc-100">
@@ -180,6 +180,7 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) {
                       <span className="w-12 text-right">{emaAlpha.toFixed(2)}</span>
                     </label>
                   )}
+                  <span className="hidden text-xs text-zinc-500 sm:inline">按 Ctrl+滚轮 缩放，拖拽平移</span>
                 </div>
               </div>
               <Line
@@ -215,7 +216,17 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) {
                 options={{
                   responsive: true,
                   interaction: { mode: 'index', intersect: false },
-                  plugins: { legend: { position: 'top' as const } },
+                  plugins: {
+                    legend: { position: 'top' as const },
+                    zoom: {
+                      pan: { enabled: true, mode: 'x' as const },
+                      zoom: {
+                        wheel: { enabled: true, modifierKey: 'ctrl' as const },
+                        pinch: { enabled: true },
+                        mode: 'x' as const,
+                      },
+                    },
+                  },
                   scales: {
                     x: { title: { display: true, text: '时间 (ms)' } },
                     yCode: { type: 'linear' as const, position: 'left' as const, title: { display: true, text: '码值' } },
@@ -240,7 +251,19 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) {
                       },
                     ],
                   }}
-                  options={{ scales: { x: { title: { display: true, text: '码值' } }, y: { title: { display: true, text: '数量' } } } }}
+                  options={{
+                    plugins: {
+                      zoom: {
+                        pan: { enabled: true, mode: 'x' as const },
+                        zoom: {
+                          wheel: { enabled: true, modifierKey: 'ctrl' as const },
+                          pinch: { enabled: true },
+                          mode: 'x' as const,
+                        },
+                      },
+                    },
+                    scales: { x: { title: { display: true, text: '码值' } }, y: { title: { display: true, text: '数量' } } },
+                  }}
                 />
               </div>
               <div className="rounded-lg border p-4 dark:border-zinc-800">
@@ -261,7 +284,17 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) {
                         x: { title: { display: true, text: '码值' } },
                         y: { title: { display: true, text: '力值 (mN)' } },
                       },
-                      plugins: { legend: { display: false } },
+                      plugins: {
+                        legend: { display: false },
+                        zoom: {
+                          pan: { enabled: true, mode: 'x' as const },
+                          zoom: {
+                            wheel: { enabled: true, modifierKey: 'ctrl' as const },
+                            pinch: { enabled: true },
+                            mode: 'x' as const,
+                          },
+                        },
+                      },
                     }}
                   />
                 ) : (