当前位置：首页 > JavaScript

js 图线实现

2026-03-14 02:00:57JavaScript

JavaScript 实现图表绘制的方法

在 JavaScript 中，有多种库和原生方法可以实现图表绘制，以下是一些常用的实现方式：

js 图线实现

使用 Canvas API

Canvas 是 HTML5 提供的原生绘图 API，适合绘制复杂的图表和图形。以下是一个简单的折线图示例：

js 图线实现

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

// 绘制坐标轴
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(50, 350);
ctx.lineTo(450, 350);
ctx.stroke();

// 绘制折线
ctx.beginPath();
ctx.moveTo(50, 350);
ctx.lineTo(150, 250);
ctx.lineTo(250, 300);
ctx.lineTo(350, 200);
ctx.lineTo(450, 250);
ctx.strokeStyle = 'blue';
ctx.stroke();

使用 SVG

SVG 是矢量图形标准，适合绘制可缩放的图表。以下是一个简单的柱状图示例：

const svg = document.getElementById('mySvg');

// 绘制柱状图
const data = [30, 70, 45, 90, 60];
data.forEach((value, index) => {
  const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
  rect.setAttribute('x', index * 60 + 10);
  rect.setAttribute('y', 100 - value);
  rect.setAttribute('width', 50);
  rect.setAttribute('height', value);
  rect.setAttribute('fill', 'green');
  svg.appendChild(rect);
});

使用第三方图表库

Chart.js
简单易用的轻量级图表库，适合快速实现常见图表类型。

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr'],
    datasets: [{
      label: 'Sales',
      data: [65, 59, 80, 81],
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }]
  }
});

D3.js
强大的数据可视化库，适合高度定制化的图表需求。

const data = [30, 70, 45, 90];
d3.select('#chart')
  .selectAll('div')
  .data(data)
  .enter()
  .append('div')
  .style('height', d => `${d}px`)
  .style('background', 'steelblue');

Highcharts
功能丰富的商业级图表库，支持多种图表类型和交互功能。

Highcharts.chart('container', {
  chart: { type: 'column' },
  title: { text: 'Monthly Sales' },
  series: [{
    name: 'Sales',
    data: [5, 10, 15, 20]
  }]
});