当前位置：首页 > JavaScript

js 图线实现

2026-02-01 03:45:23JavaScript

使用 Canvas 绘制图线

Canvas 是 HTML5 提供的绘图 API，适合实现动态或复杂的图线。通过 getContext('2d') 获取绘图上下文后，使用 beginPath()、moveTo()、lineTo() 等方法绘制线条。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(10, 10); // 起点坐标
ctx.lineTo(100, 50); // 终点坐标
ctx.strokeStyle = 'blue'; // 线条颜色
ctx.lineWidth = 2; // 线条宽度
ctx.stroke(); // 绘制线条

使用 SVG 绘制图线

SVG 是矢量图形标准，适合静态或可缩放的图线。通过 <line> 元素定义线条的起点 (x1, y1) 和终点 (x2, y2)。

js 图线实现

<svg width="200" height="100">
  <line x1="10" y1="10" x2="100" y2="50" stroke="blue" stroke-width="2" />
</svg>

使用第三方库（如 Chart.js）

Chart.js 是流行的图表库，适合快速实现数据可视化。通过配置 type: 'line' 创建折线图。

js 图线实现

import Chart from 'chart.js/auto';

const ctx = document.getElementById('myChart').getContext('2d');
const chart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar'],
    datasets: [{
      label: 'Sales',
      data: [12, 19, 3],
      borderColor: 'blue',
      tension: 0.1
    }]
  }
});

使用 D3.js 实现高级图线

D3.js 适合需要高度定制的图线。通过 d3.line() 生成路径数据，结合比例尺 (d3.scaleLinear) 映射数据到坐标。

import * as d3 from 'd3';

const data = [10, 20, 30, 40];
const svg = d3.select('body').append('svg').attr('width', 200).attr('height', 100);

const line = d3.line()
  .x((d, i) => i * 50)
  .y(d => 100 - d);

svg.append('path')
  .datum(data)
  .attr('d', line)
  .attr('stroke', 'blue')
  .attr('fill', 'none');

响应式图线的实现

使用 window.addEventListener('resize') 监听窗口变化，动态调整 Canvas 或 SVG 的尺寸。

function resizeCanvas() {
  const canvas = document.getElementById('myCanvas');
  canvas.width = window.innerWidth * 0.8;
  canvas.height = window.innerHeight * 0.6;
  // 重绘逻辑
}

window.addEventListener('resize', resizeCanvas);