自己手写曲线图，Echarts也不行？

前端

2023-10-02 10:13:13

Echarts 绘制不了的曲线图：详解手写曲线图

简介

Echarts 是一款广受欢迎的前端图表库，但它并非万能的。有些图表，它无能为力。比如，当你想绘制一条由多条不同颜色折线组成的曲线图时，Echarts 就束手无策了。

Echarts 的局限

Echarts 只支持绘制单条折线图，无法创建多个折线图叠加的曲线图。如果你执意用 Echarts 强行实现，只能得到一条被其他折线覆盖住的折线图。

手写曲线图的魅力

既然 Echarts 无法满足需求，那我们就自己动手，手写一条曲线图吧！虽然这种方法有点麻烦，但它可以实现 Echarts 无法企及的效果。

手写曲线图的步骤

创建画布： 首先，创建一个 HTML5 画布元素，用于绘制曲线图。
获取画布上下文： 获取画布的绘图上下文，以便在画布上绘制图形。
设置背景颜色： 为画布设置背景颜色，通常为白色。
绘制坐标轴： 绘制横轴和纵轴，形成坐标系。
绘制折线图： 使用不同的颜色，分别绘制每条折线。
添加数据标签： 在每个数据点上，添加相应的数据值标签。

手写曲线图的代码示例

以下代码示例展示了如何手写一条由两条不同颜色折线组成的曲线图：

// 创建画布
const canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;

// 获取画布上下文
const ctx = canvas.getContext('2d');

// 设置背景颜色
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 绘制坐标轴
ctx.strokeStyle = 'black';
ctx.lineWidth = 1;

// 绘制横轴
ctx.beginPath();
ctx.moveTo(0, canvas.height - 50);
ctx.lineTo(canvas.width, canvas.height - 50);
ctx.stroke();

// 绘制纵轴
ctx.beginPath();
ctx.moveTo(50, 0);
ctx.lineTo(50, canvas.height);
ctx.stroke();

// 绘制折线图
const data = [
  {
    name: '系列 1',
    data: [1, 2, 3, 4, 5],
    color: 'red',
  },
  {
    name: '系列 2',
    data: [6, 7, 8, 9, 10],
    color: 'blue',
  },
];

// 分别绘制每条折线
data.forEach((series) => {
  // 设置折线颜色
  ctx.strokeStyle = series.color;
  ctx.lineWidth = 2;

  // 开始绘制路径
  ctx.beginPath();
  ctx.moveTo(50, canvas.height - 50);

  // 绘制折线
  series.data.forEach((value, index) => {
    const x = 50 + index * 100;
    const y = canvas.height - 50 - value * 10;

    ctx.lineTo(x, y);
  });

  // 绘制完成
  ctx.stroke();
});

// 添加数据标签
data.forEach((series) => {
  // 设置数据标签颜色
  ctx.fillStyle = series.color;
  ctx.font = '12px Arial';

  // 添加每个数据点的标签
  series.data.forEach((value, index) => {
    const x = 50 + index * 100;
    const y = canvas.height - 50 - value * 10;

    ctx.fillText(value, x, y - 10);
  });
});