在 Web 项目中构建交互式图表、KPI…

适用于前端/全栈项目按数据与框架选择 Recharts、Chart.js 或 D3，并实现图表、KPI 面板、实时/可筛选仪表盘、响应式、导出与性能优化。

适用场景

解决思路

1. 按数据类型创建图表：基础图表用折线图、柱状图、饼图；扩展图表用面积图、散点图、热力图；复杂关系用 Sankey、树状图、网络图。
2. 构建仪表盘：包含 KPI 卡片与指标、实时数据仪表盘、交互式筛选与下钻、响应式布局。
3. 做数据呈现：进行数据叙事、选择配色与无障碍方案、添加动画与交互、提供导出能力。
4. Recharts 选型：适合 React/Next.js 项目、快速简单图表、标准图表类型、响应式设计。
5. Recharts 实现：从 'recharts' 导入 LineChart、Line、XAxis、YAxis、CartesianGrid、Tooltip、Legend；准备 data 数组（如 month、revenue、expenses）；返回 <LineChart width={600} height={300} data={data}>，包含 CartesianGrid strokeDasharray='3 3'、XAxis dataKey='month'、YAxis、Tooltip、Legend，以及两条 Line type='monotone' dataKey='revenue'/'expenses' stroke='#8884d8'/'#82ca9d'。
6. Chart.js 选型：适合 Vue/Angular、框架无关、简单 API、文档完善、标准图表类型。
7. Chart.js 实现：从 'chart.js/auto' 导入 Chart；用 document.getElementById('myChart') 获取 ctx；new Chart(ctx, { type: 'bar', data: { labels: ['Jan','Feb','Mar','Apr','May','Jun'], datasets: [{ label: 'Sales', data: [12,19,3,5,2,3], backgroundColor: 'rgba(54, 162, 235, 0.5)' }] }, options: { responsive: true, plugins: { legend: { position: 'top' }, title: { display: true, text: 'Monthly Sales' } } } })。
8. D3.js 选型：适合自定义可视化、复杂交互、完全控制渲染、数据驱动文档；需要自定义图表类型、复杂数据转换、高级交互、出版级图形时使用。
9. D3.js 实现柱状图：从 'd3' 导入 * as d3；定义 width=600、height=400、margin={ top:20, right:20, bottom:30, left:40 }；d3.select('#chart').append('svg').attr('width', width).attr('height', height)；用 d3.scaleBand() 设置 x 域和 range([margin.left, width - margin.right]).padding(0.1)；用 d3.scaleLinear() 设置 y 域 [0, d3.max(data, d => d.value)] 和 range([height - margin.bottom, margin.top])；svg.selectAll('rect').data(data).join('rect').attr('x', d => x(d.name)).attr('y', d => y(d.value)).attr('height', d => y(0) - y(d.value)).attr('width', x.bandwidth()).attr('fill', 'steelblue')；追加 g 轴：底部 transform translate(0, height - margin.bottom) 调用 d3.axisBottom(x)，左侧 transform translate(margin.left, 0) 调用 d3.axisLeft(y)。
10. KPI Dashboard 模式：实现 KPICard 组件，props 为 title、value、change、trend；trend 为 up 时 trendColor='text-green-600' 且 trendIcon='↑'，down 时 trendColor='text-red-600' 且 trendIcon='↓'；返回 Card className='p-6'，显示标题、值、趋势百分比；Dashboard 用 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 放置 Total Revenue、Active Users、Conversion Rate、Avg Order Value 等 KPI。
11. Real-Time Dashboard 模式：'use client'；用 useEffect 和 useState；先 fetch('/api/metrics/realtime').then(res => res.json()).then(setData)；再创建 const eventSource = new EventSource('/api/metrics/stream')；eventSource.onmessage 中 JSON.parse(event.data) 得到 newDataPoint，setData(prev => { const updated = [...prev, newDataPoint]; return updated.slice(-20) })；清理时 eventSource.close()；渲染 ResponsiveContainer width='100%' height={300} 和 LineChart，XAxis dataKey='time'、YAxis、Tooltip、Line type='monotone' dataKey='value' stroke='#8884d8' strokeWidth={2} dot={false} isAnimationActive={false}。
12. SSE API Route 模式：在 app/api/metrics/stream/route.ts 中 GET(req)；用 TextEncoder 和 ReadableStream start(controller)；setInterval 每 1000ms 生成 value=Math.floor(Math.random()*100) 和 time=new Date().toLocaleTimeString()；controller.enqueue(encoder.encode(`data: ${JSON.stringify({ time, value })}\n\n`))；req.signal 的 abort 事件中 clearInterval(interval) 并 controller.close()；返回 new Response(stream, { headers: { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', Connection: 'keep-alive' } })。
13. Interactive Dashboard with Filters 模式：'use client'；用 useState 管理 period: '7d' | '30d' | '90d' 和 region: 'all' | 'us' | 'eu' | 'asia'；调用 useSalesData({ period, region })；渲染两个 select，period 选项 Last 7 days/Last 30 days/Last 90 days，region 选项 All Regions/United States/Europe/Asia；loading 时显示 Loading...；否则用 ResponsiveContainer width='100%' height={400} 和 BarChart，XAxis dataKey='date'、YAxis、Tooltip、Bar dataKey='sales' fill='#8884d8'。
14. useSalesData hook：用 useState 管理 data 和 loading；useEffect 中 setLoading(true)，fetch(`/api/sales?period=${period}&region=${region}`).then(res => res.json()).then(data => { setData(data); setLoading(false) })；依赖 [period, region]。
15. Line Chart 指南：适合趋势随时间变化、连续数据；用 <LineChart data={data}><Line type='monotone' dataKey='value' stroke='#8884d8' /></LineChart>；用于股票价格、温度、网站流量、显示随时间变化、多个数据序列比较。
16. Bar Chart 指南：适合比较类别；用 <BarChart data={data}><Bar dataKey='value' fill='#8884d8' /></BarChart>；用于按产品销售、按国家用户、离散类别、排名/比较。
17. Pie/Donut Chart 指南：适合部分与整体关系；用 <PieChart><Pie data={data} dataKey='value' nameKey='name' fill='#8884d8' /></PieChart>；用于市场份额、预算分配、比例（最多 5-7 个切片）、简单百分比；类别超过 7 个或需要精确比较时避免使用，改用柱状图。
18. Area Chart 指南：适合随时间变化的量；用 <AreaChart data={data}><Area type='monotone' dataKey='value' fill='#8884d8' /></AreaChart>；用于累计总量、填充区域显示大小、堆叠类别。
19. Scatter Plot 指南：适合变量相关性；用 <ScatterChart><Scatter data={data} fill='#8884d8' /></ScatterChart>；用于发现相关性、异常值检测、分布分析。
20. Heatmap 指南：适合两个维度上的强度；用 D3 实现：const colorScale = d3.scaleSequential(d3.interpolateBlues).domain([0, d3.max(data)])；svg.selectAll('rect').data(data).join('rect').attr('fill', d => colorScale(d.value))；用于基于时间的模式（天/小时）、地理强度、矩阵数据。
21. Mobile-Friendly Charts 响应式：'use client'；用 useEffect 和 useState 判断 isMobile；checkMobile 中 setIsMobile(window.innerWidth < 768)；初始化调用 checkMobile()，添加 window.addEventListener('resize', checkMobile)，清理时 removeEventListener；渲染 ResponsiveContainer width='100%' height={isMobile ? 200 : 400} 和 LineChart；Line dataKey='value' stroke='#8884d8' strokeWidth={isMobile ? 1 : 2}。
22. Accessible Colors：在 colors.ts 导出 chartColors，包含 primary '#0066CC'、success '#007A3D'、warning '#C87000'、danger '#D32F2F'（WCAG AA 合规）；多序列 series 使用 '#0066CC'、'#CC6600'、'#7A00CC'、'#00CC66'、'#CC0066'。
23. Colorblind-Safe Palettes：最多 5 个数据序列时使用 colorblindSafe = ['#000000','#E69F00','#56B4E9','#009E73','#F0E442']。
24. Number Formatting：在 utils/formatters.ts 实现 formatCurrency，用 new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(value)；formatPercent，用 new Intl.NumberFormat('en-US', { style: 'percent', minimumFractionDigits: 1, maximumFractionDigits: 1 }).format(value / 100)；formatNumber，value >= 1000000 返回 `${(value / 1000000).toFixed(1)}M`，value >= 1000 返回 `${(value / 1000).toFixed(1)}K`，否则 value.toFixed(0)；图表中用 <YAxis tickFormatter={formatCurrency} />。
25. Export Chart as PNG：'use client'；导入 html2canvas；ExportableChart 中用 useRef<HTMLDivElement>(null) 定义 chartRef；exportToPNG 为 async，若 chartRef.current 不存在则 return；const canvas = await html2canvas(chartRef.current)；创建 link，download='chart.png'，href=canvas.toDataURL()，link.click()；渲染按钮 onClick={exportToPNG} 和 div ref={chartRef} 包含 children。
26. Export Data as CSV：实现 exportToCSV(data, filename)；headers = Object.keys(data[0])；csv = [headers.join(','), ...data.map(row => headers.map(h => row[h]).join(','))].join('\n')；创建 Blob([csv], { type: 'text/csv' })；创建 link，download=`${filename}.csv`，href=URL.createObjectURL(blob)，link.click()；使用 <button onClick={() => exportToCSV(data, 'sales-data')}>Export to CSV</button>。
27. Lazy Loading Charts：用 import dynamic from 'next/dynamic'；const LineChart = dynamic(() => import('recharts').then(mod => mod.LineChart), { ssr: false })；页面中渲染 <LineChart data={data} />。
28. Virtualization for Large Datasets：从 '@tanstack/react-virtual' 导入 useVirtualizer；LargeDataTable 中用 useRef<HTMLDivElement>(null) 定义 parentRef；const virtualizer = useVirtualizer({ count: data.length, getScrollElement: () => parentRef.current, estimateSize: () => 50 })；渲染 div ref={parentRef} className='h-96 overflow-auto'，内层 div style={{ height: `${virtualizer.getTotalSize()}px` }}，map virtualizer.getVirtualItems() 渲染 data[virtualRow.index].name 和 value。
29. Smooth Transitions：LineChart 中 Line 设置 type='monotone'、dataKey='value'、stroke='#8884d8'、animationDuration={500}、animationEasing='ease-in-out'。
30. Disable Animation for Real-Time：实时仪表盘中 Line 设置 dataKey='value'、isAnimationActive={false}。
31. Drill-Down Chart：'use client'；用 useState 管理 level: 'year' | 'month' | 'day' 和 selectedYear；handleBarClick 中，如果 level==='year' 则 setSelectedYear(data.year) 并 setLevel('month')，如果 level==='month' 则 setLevel('day')；goBack 中，如果 level==='day' 则 setLevel('month')，如果 level==='month' 则 setLevel('year') 并 setSelectedYear(null)；level !== 'year' 时渲染 Back 按钮 onClick={goBack}；BarChart data={getData(level, selectedYear)} width={600} height={300}，Bar dataKey='value' fill='#8884d8' onClick={handleBarClick}，XAxis dataKey='name'，YAxis。
32. 适用任务与产出：用于构建分析仪表盘、交互式图表、数据叙事、实时监控、复杂数据集可视化；实施时帮助选择正确图表类型、实现响应式布局、添加交互、优化性能、确保无障碍；交付图表与可视化、KPI 仪表盘、自定义配色、响应式布局、实时更新、导出功能。

适用边界 · 注意事项

• 饼图/环形图在类别超过 7 个或需要精确比较时不要用，应改用柱状图。
• 实时数据仪表盘不要启用动画，应设置 isAnimationActive={false}。
• 不要用 D3.js 做快速简单的标准图表；这类需求优先用 Recharts（React/Next.js）或 Chart.js（Vue/Angular/框架无关）。