js 图线实现
JavaScript 实现图表绘制的方法
在 JavaScript 中，有多种库和原生方法可以实现图表绘制，以下是一些常用的实现方式：
使用 Canvas API
Canvas 是 HTML5 提供的原生绘图 API，适合绘制复杂的图表和图形。以下是一个简单的折线图示例：
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]
}]
});选择建议
- 简单需求：优先使用 Chart.js 或 Highcharts。
- 高度定制化：选择 D3.js 或 Canvas API。
- 性能敏感场景：Canvas 比 SVG 更适合大数据量渲染。
