← 返回实验工坊

📊 可视化实验室

Data Visualization Lab · 用数据讲故事
📊 销售数据柱状图
Chart.js 柱状图 响应式
使用 Chart.js 创建的自适应柱状图，展示季度销售数据。
new Chart(ctx, {
  type: 'bar',
  data: { labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    datasets: [{ data: [65, 59, 80, 81] }]
  }
});
📈 趋势分析折线图
Chart.js 折线图 趋势
多组数据对比的折线图，适合展示趋势变化。
datasets: [{
  label: '2025', data: [28, 48, 40, 19],
  borderColor: '#0096ff'
}]
🥧 占比分析饼图
Chart.js 饼图 占比
直观展示各部分的占比情况。
type: 'pie',
data: { labels: ['A', 'B', 'C'],
  datasets: [{ data: [30, 50, 20] }] }
📡 能力评估雷达图
Chart.js 雷达图 多维
多维数据对比，适合能力评估、性能分析。
type: 'radar',
data: { labels: ['JS', 'Python', 'CSS'],
  datasets: [{ data: [90, 75, 85] }] }
📊 D3 基础条形图
D3.js SVG 数据驱动
使用 D3.js 创建的条形图，完全可定制。
d3.select('svg')
  .selectAll('rect')
  .data(data)
  .enter()...
⚫ D3 散点图
D3.js 散点图 相关性
展示数据分布和相关性。
d3.select('svg')
  .selectAll('circle')
  .data(data)
  .enter()...