JS如何实现图表绘制_JavaScript结合Canvas或SVG绘制图表方法教程-js教程-PHP中文网

JS如何实现图表绘制_JavaScript结合Canvas或SVG绘制图表方法教程

雪夜

发布： 2025-11-04 10:10:02

原创

718人浏览过

JavaScript绘制图表主要采用Canvas和SVG。Canvas适合高性能、大量数据绘制，如动态柱状图；SVG则因支持DOM操作和事件交互，更适合可缩放、需用户交互的折线图等场景。

js如何实现图表绘制_javascript结合canvas或svg绘制图表方法教程

JavaScript 实现图表绘制主要依赖两种技术：Canvas 和 SVG。它们各有特点，适用于不同场景。下面详细介绍如何使用 JavaScript 结合 Canvas 或 SVG 来绘制常见图表，如柱状图、折线图等。

使用 Canvas 绘制图表

Canvas 是 HTML5 提供的位图画布，通过 JavaScript 操作绘图上下文（context）来绘制图形。它适合绘制大量数据点，性能较高，但不保留图形对象信息。

基本步骤：

在 HTML 中创建 <canvas> 元素，并设置宽高
用 JavaScript 获取 canvas 上下文（2d context）
使用 context 的绘图方法绘制图形

示例：绘制简单柱状图

立即学习“Java免费学习笔记（深入）”；

<canvas id="myChart" width="400" height="300"></canvas>
<script>
  const canvas = document.getElementById('myChart');
  const ctx = canvas.getContext('2d');
  const data = [30, 50, 80, 60, 90]; // 示例数据
  const barWidth = 50;
  const barSpacing = 20;
  const maxHeight = canvas.height - 20;
  const maxValue = Math.max(...data);

  data.forEach((value, index) => {
    const x = index * (barWidth + barSpacing) + 30;
    const y = maxHeight - (value / maxValue) * (maxHeight - 40);
    const height = (value / maxValue) * (maxHeight - 40);

    // 绘制矩形柱子
    ctx.fillStyle = '#4CAF50';
    ctx.fillRect(x, y, barWidth, height);

    // 添加数值标签
    ctx.fillStyle = '#000';
    ctx.font = '12px Arial';
    ctx.fillText(value, x + barWidth / 2 - 8, y - 5);
  });
</script>

登录后复制

Canvas 优势在于绘制效率高，适合动态更新和动画效果，但缺点是每个图形不是独立 DOM 节点，难以绑定事件或单独操作某根柱子。

使用 SVG 绘制图表

SVG（可缩放矢量图形）基于 XML 标签，每个图形元素都是独立的 DOM 节点，支持事件监听、CSS 样式和响应式缩放，适合需要交互的图表。

iMuse.AI

iMuse.AI 创意助理，为设计师提供无限灵感！

139

查看详情

基本结构：

在 HTML 中插入 <svg> 标签，定义宽度和高度
使用 JavaScript 动态创建图形元素（如 <rect>, <line>, <text>）并添加到 SVG 中

示例：用 SVG 绘制折线图

<svg id="lineChart" width="400" height="300"></svg>
<script>
  const svg = document.getElementById('lineChart');
  const data = [20, 40, 25, 70, 60];
  const padding = 40;
  const width = 400 - 2 * padding;
  const height = 300 - 2 * padding;
  const xStep = width / (data.length - 1);
  const maxValue = Math.max(...data);

  // 绘制坐标轴线
  const xAxis = document.createElementNS("http://www.w3.org/2000/svg", "line");
  xAxis.setAttribute("x1", padding);
  xAxis.setAttribute("y1", height + padding);
  xAxis.setAttribute("x2", width + padding);
  xAxis.setAttribute("y2", height + padding);
  xAxis.setAttribute("stroke", "black");
  svg.appendChild(xAxis);

  // 绘制折线路径
  let pathData = `M ${padding} ${height + padding - (data[0] / maxValue) * height}`;
  for (let i = 1; i < data.length; i++) {
    const x = padding + i * xStep;
    const y = height + padding - (data[i] / maxValue) * height;
    pathData += ` L ${x} ${y}`;
  }

  const line = document.createElementNS("http://www.w3.org/2000/svg", "path");
  line.setAttribute("d", pathData);
  line.setAttribute("fill", "none");
  line.setAttribute("stroke", "#1E90FF");
  line.setAttribute("stroke-width", 2);
  svg.appendChild(line);

  // 添加数据点圆圈
  data.forEach((value, index) => {
    const x = padding + index * xStep;
    const y = height + padding - (value / maxValue) * height;
    const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    circle.setAttribute("cx", x);
    circle.setAttribute("cy", y);
    circle.setAttribute("r", 4);
    circle.setAttribute("fill", "#FF4500");

    // 添加鼠标悬停提示
    circle.addEventListener('mouseover', () => {
      tooltip.style.display = 'block';
      tooltip.style.left = x + 10 + 'px';
      tooltip.style.top = y - 20 + 'px';
      tooltip.textContent = value;
    });

    svg.appendChild(circle);
  });

  // 提示框
  const tooltip = document.createElement('div');
  tooltip.style.position = 'absolute';
  tooltip.style.background = '#333';
  tooltip.style.color = '#fff';
  tooltip.style.padding = '4px 8px';
  tooltip.style.borderRadius = '4px';
  tooltip.style.fontSize = '12px';
  tooltip.style.display = 'none';
  document.body.appendChild(tooltip);

  document.addEventListener('mousemove', () => {
    if (tooltip.style.display === 'block') {
      tooltip.style.display = 'none';
    }
  });
</script>

登录后复制

SVG 更适合需要交互、缩放或长期维护的图表项目。每个元素可绑定事件，便于实现点击、悬停等行为。