当前位置：首页 > JavaScript

js实现曲线图

2026-03-01 06:45:56JavaScript

使用 Chart.js 绘制曲线图

Chart.js 是一个流行的 JavaScript 库，用于创建各种图表类型，包括曲线图（折线图）。以下是一个基本实现示例：

// 引入 Chart.js
import Chart from 'chart.js/auto';

// 获取 canvas 元素
const ctx = document.getElementById('myChart').getContext('2d');

// 创建图表
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
        datasets: [{
            label: 'Dataset 1',
            data: [12, 19, 3, 5, 2, 3],
            borderColor: 'rgb(75, 192, 192)',
            tension: 0.1
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

使用 D3.js 创建自定义曲线图

D3.js 提供了更底层的控制，适合需要高度自定义的场景：

js实现曲线图

// 定义数据
const data = [10, 20, 30, 40, 50, 60];

// 创建 SVG 容器
const svg = d3.select('body')
    .append('svg')
    .attr('width', 500)
    .attr('height', 300);

// 定义比例尺
const xScale = d3.scaleLinear()
    .domain([0, data.length - 1])
    .range([50, 450]);

const yScale = d3.scaleLinear()
    .domain([0, d3.max(data)])
    .range([250, 50]);

// 创建曲线生成器
const line = d3.line()
    .x((d, i) => xScale(i))
    .y(d => yScale(d))
    .curve(d3.curveBasis);

// 绘制路径
svg.append('path')
    .datum(data)
    .attr('fill', 'none')
    .attr('stroke', 'steelblue')
    .attr('stroke-width', 2)
    .attr('d', line);

使用 Canvas API 手动绘制

对于不需要依赖库的场景，可以直接使用 Canvas API：

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

// 定义数据点
const points = [
    {x: 50, y: 100},
    {x: 150, y: 50},
    {x: 250, y: 150},
    {x: 350, y: 100},
    {x: 450, y: 200}
];

// 绘制曲线
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);

for (let i = 1; i < points.length - 2; i++) {
    const xc = (points[i].x + points[i + 1].x) / 2;
    const yc = (points[i].y + points[i + 1].y) / 2;
    ctx.quadraticCurveTo(points[i].x, points[i].y, xc, yc);
}

ctx.quadraticCurveTo(
    points[points.length - 2].x,
    points[points.length - 2].y,
    points[points.length - 1].x,
    points[points.length - 1].y
);

ctx.strokeStyle = 'blue';
ctx.lineWidth = 2;
ctx.stroke();

响应式曲线图实现

确保图表在不同屏幕尺寸下正常显示：

js实现曲线图

function resizeChart() {
    myChart.resize();
}

window.addEventListener('resize', resizeChart);

添加动画效果

Chart.js 内置支持动画效果：

options: {
    animation: {
        duration: 2000,
        easing: 'easeInOutQuad'
    }
}

对于 D3.js，可以添加过渡效果：

svg.selectAll('circle')
    .data(data)
    .enter()
    .append('circle')
    .attr('cx', (d, i) => xScale(i))
    .attr('cy', d => yScale(d))
    .attr('r', 0)
    .transition()
    .duration(1000)
    .attr('r', 5);

以上方法提供了从简单到复杂的多种实现方案，可根据项目需求选择合适的方案。