当前位置：首页 > JavaScript

js实现折线图

2026-01-30 15:37:29JavaScript

使用 Canvas API 绘制折线图

通过原生 Canvas API 绘制折线图可以高度自定义样式和交互。以下是一个基础实现示例：

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

// 数据准备
const data = [30, 50, 80, 45, 65];
const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May'];

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

// 绘制折线
ctx.beginPath();
data.forEach((value, index) => {
  const x = 50 + (index * 100);
  const y = 250 - (value * 2);
  if (index === 0) {
    ctx.moveTo(x, y);
  } else {
    ctx.lineTo(x, y);
  }
});
ctx.strokeStyle = 'blue';
ctx.lineWidth = 2;
ctx.stroke();

使用 Chart.js 库实现

Chart.js 是流行的开源图表库，实现折线图非常简便：

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart"></canvas>

<script>
  const ctx = document.getElementById('myChart').getContext('2d');
  const chart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['January', 'February', 'March', 'April'],
      datasets: [{
        label: 'Sales 2023',
        data: [65, 59, 80, 81],
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1
      }]
    },
    options: {
      responsive: true,
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

使用 ECharts 实现交互式折线图

ECharts 提供丰富的交互功能和可视化效果：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<div id="chart" style="width: 600px;height:400px;"></div>

<script>
  const chartDom = document.getElementById('chart');
  const myChart = echarts.init(chartDom);

  const option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [820, 932, 901, 934, 1290],
      type: 'line',
      smooth: true,
      areaStyle: {}
    }]
  };

  myChart.setOption(option);
</script>

使用 D3.js 创建动态折线图

D3.js 适合需要复杂交互和数据绑定的场景：

<script src="https://d3js.org/d3.v7.min.js"></script>
<svg id="d3-chart"></svg>

<script>
  const data = [4, 8, 15, 16, 23, 42];
  const width = 500, height = 300;

  const svg = d3.select("#d3-chart")
    .attr("width", width)
    .attr("height", height);

  const xScale = d3.scaleLinear()
    .domain([0, data.length-1])
    .range([0, width-50]);

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

  const line = d3.line()
    .x((d,i) => xScale(i))
    .y(d => yScale(d));

  svg.append("path")
    .datum(data)
    .attr("fill", "none")
    .attr("stroke", "steelblue")
    .attr("stroke-width", 2)
    .attr("d", line);
</script>

响应式折线图实现

确保折线图适应不同屏幕尺寸：

js实现折线图

function resizeChart() {
  const container = document.getElementById('chart-container');
  const canvas = document.getElementById('myChart');
  canvas.width = container.clientWidth;
  canvas.height = container.clientHeight;
  // 重新绘制图表逻辑...
}

window.addEventListener('resize', resizeChart);

每种方法各有优势：Canvas API 适合轻量级需求，Chart.js 提供快速解决方案，ECharts 适合复杂可视化，D3.js 则提供最大灵活性。根据项目需求选择合适的技术方案。