js实现仪表盘、柱状图、线图、雷达图、点图

原创于 2025-10-24 17:10:15 发布 · 684 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#1024程序员节

以下是使用JavaScript实现仪表盘、柱状图、线图、雷达图和点图的解决方案，推荐使用Chart.js库（轻量级且功能全面）：

1. 基础设置

<!DOCTYPE html>
<html>
<head>
  <title>图表展示</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <div style="display:flex; flex-wrap:wrap">
    <!-- 图表容器 -->
    <div style="width:45%; margin:10px">
      <canvas id="gaugeChart"></canvas>
    </div>
    <div style="width:45%; margin:10px">
      <canvas id="barChart"></canvas>
    </div>
    <div style="width:45%; margin:10px">
      <canvas id="lineChart"></canvas>
    </div>
    <div style="width:45%; margin:10px">
      <canvas id="radarChart"></canvas>
    </div>
    <div style="width:45%; margin:10px">
      <canvas id="scatterChart"></canvas>
    </div>
  </div>

  <script>
    // 以下图表配置代码
  </script>
</body>
</html>

2. 仪表盘实现

// 仪表盘
const gaugeCtx = document.getElementById('gaugeChart').getContext('2d');
new Chart(gaugeCtx, {
  type: 'doughnut',
  data: {
    datasets: [{
      data: [75, 25],
      backgroundColor: ['#FF6384', '#E0E0E0'],
      borderWidth: 0
    }]
  },
  options: {
    circumference: 180,
    rotation: 270,
    cutout: '90%',
    plugins: {
      legend: { display: false },
      tooltip: { enabled: false },
      title: { display: true, text: '系统负载 (75%)' }
    }
  }
});

3. 柱状图实现

// 柱状图
const barCtx = document.getElementById('barChart').getContext('2d');
new Chart(barCtx, {
  type: 'bar',
  data: {
    labels: ['一月', '二月', '三月', '四月', '五月'],
    datasets: [{
      label: '销售额 (万元)',
      data: [12, 19, 8, 15, 22],
      backgroundColor: 'rgba(54, 162, 235, 0.7)',
      borderColor: 'rgba(54, 162, 235, 1)',
      borderWidth: 1
    }]
  },
  options: {
    scales: { y: { beginAtZero: true } }
  }
});

4. 线图实现

// 线图
const lineCtx = document.getElementById('lineChart').getContext('2d');
new Chart(lineCtx, {
  type: 'line',
  data: {
    labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    datasets: [{
      label: '用户活跃度',
      data: [650, 590, 800, 810, 780, 950, 1000],
      fill: false,
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }]
  }
});

5. 雷达图实现

// 雷达图
const radarCtx = document.getElementById('radarChart').getContext('2d');
new Chart(radarCtx, {
  type: 'radar',
  data: {
    labels: ['技术', '沟通', '管理', '创新', '执行'],
    datasets: [{
      label: '能力评估',
      data: [85, 70, 90, 60, 80],
      fill: true,
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      borderColor: 'rgb(255, 99, 132)'
    }]
  },
  options: { scales: { r: { min: 0, max: 100 } } }
});

6. 点图（散点图）实现

// 散点图
const scatterCtx = document.getElementById('scatterChart').getContext('2d');
new Chart(scatterCtx, {
  type: 'scatter',
  data: {
    datasets: [{
      label: '产品分布',
      data: [
        { x: 10, y: 20 },
        { x: 15, y: 35 },
        { x: 25, y: 15 },
        { x: 30, y: 45 },
        { x: 40, y: 25 }
      ],
      backgroundColor: 'rgb(255, 159, 64)'
    }]
  },
  options: {
    scales: {
      x: { title: { display: true, text: '价格指数' } },
      y: { title: { display: true, text: '销量指数' } }
    }
  }
});

关键特性说明：

响应式设计：容器自动适应屏幕尺寸
交互功能：所有图表支持悬停查看详情
视觉优化：
- 仪表盘使用半圆设计
- 柱状图添加透明效果
- 线图使用平滑曲线
- 雷达图使用填充色增强可读性
数据展示：每个图表包含清晰的数据标签和坐标说明

自定义建议：

修改data数组可更新图表数据
调整backgroundColor改变颜色方案

在options中添加动画效果：

animation: {
  duration: 2000,
  easing: 'easeOutBounce'
}

完整实现需要约50KB资源（含Chart.js库），适合大多数现代浏览器，可通过npm安装或CDN引入。