不借助Echarts等图形框架原生JS快速实现折线图效果

折线图是一种常见的数据可视化方式，它可以清晰地展示数据的趋势和变化。

首先，我们需要准备一些样例数据来展示折线图。假设我们有以下数据：

javascript 复制代码

const data = [
  { x: 1, y: 5 },
  { x: 2, y: 9 },
  { x: 3, y: 7 },
  { x: 4, y: 3 },
  { x: 5, y: 8 },
  // ...
];

这是一个简单的二维数组，每个元素包含两个属性 x 和 y，分别表示横坐标和纵坐标的值。

接下来，我们需要创建一个 SVG 元素来容纳折线图。可以使用 JavaScript 的 DOM 操作来实现：

javascript 复制代码

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width', '500');
svg.setAttribute('height', '300');

document.body.appendChild(svg);

这段代码创建了一个宽度为 500 像素、高度为 300 像素的 SVG 元素，并将其添加到页面的 body 元素中。

接下来，我们需要计算数据点在 SVG 中的位置。假设我们希望折线图的横坐标范围为 0 到 100，纵坐标范围为 0 到 200。我们可以使用如下代码来计算每个数据点在 SVG 中的位置：

javascript 复制代码

const xScale = d3.scaleLinear()
  .domain([0, 100])
  .range([0, 500]);

const yScale = d3.scaleLinear()
  .domain([0, 200])
  .range([300, 0]);

const points = data.map(d => ({
  x: xScale(d.x),
  y: yScale(d.y),
}));

上述代码使用了 d3.js 库中的 scaleLinear 函数来进行线性映射，将数据点的值映射到 SVG 中的位置。

接下来，我们需要创建折线图的路径元素，并设置其属性来绘制线条：

javascript 复制代码

const line = document.createElementNS('http://www.w3.org/2000/svg', 'path');
line.setAttribute('d', `M ${points[0].x} ${points[0].y} L ${points[1].x} ${points[1].y} ...`);
line.setAttribute('fill', 'none');
line.setAttribute('stroke', 'blue');
line.setAttribute('stroke-width', '2');

svg.appendChild(line);

在上述代码中，我们创建了一个路径元素，并设置了 d 属性来定义路径的形状。将所有数据点连接起来形成一条折线。最后，将路径元素添加到 SVG 元素中。

现在，我们已经完成了折线图的绘制，但是还没有添加坐标轴和标签。可以使用类似的方法来创建坐标轴的线条和刻度标签：

javascript 复制代码

const xAxis = document.createElementNS('http://www.w3.org/2000/svg', 'line');
xAxis.setAttribute('x1', '0');
xAxis.setAttribute('y1', '300');
xAxis.setAttribute('x2', '500');
xAxis.setAttribute('y2', '300');
xAxis.setAttribute('stroke', 'black');
xAxis.setAttribute('stroke-width', '1');

svg.appendChild(xAxis);

const yAxis = document.createElementNS('http://www.w3.org/2000/svg', 'line');
yAxis.setAttribute('x1', '0');
yAxis.setAttribute('y1', '0');
yAxis.setAttribute('x2', '0');
yAxis.setAttribute('y2', '300');
yAxis.setAttribute('stroke', 'black');
yAxis.setAttribute('stroke-width', '1');

svg.appendChild(yAxis);

data.forEach((d, i) => {
  const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
  label.setAttribute('x', points[i].x);
  label.setAttribute('y', '320');
  label.setAttribute('fill', 'black');
  label.setAttribute('font-size', '12');
  label.setAttribute('text-anchor', 'middle');
  label.textContent = d.x;

  svg.appendChild(label);
});

上述代码分别创建了 x 轴和 y 轴的线条，并通过 setAttribute 函数设置其属性。然后，通过遍历数据点，在每个数据点的位置创建一个标签元素，并设置其属性和文本内容。

添加动画效果可以通过 CSS 动画或 JavaScript 动画库来为折线图添加动态效果。例如，使用 CSS 过渡属性 transition 来为路径元素的路径属性 d 值添加动画效果，使折线平滑地过渡到新的位置。
支持多条折线如果需要在同一个折线图中显示多条折线，可以通过在 SVG 中创建多个路径元素，并分别设置不同的数据源和样式来实现。可以根据需要自定义不同的颜色、线宽等属性，以便区分不同的数据系列。
添加悬停效果和提示框通过监听鼠标事件，当鼠标悬停在某个数据点上时，可以显示该数据点的具体数值或其他相关信息。可以使用 HTML 元素模拟一个提示框，并根据鼠标位置动态更新其内容和位置。
支持缩放和平移在处理大量数据时，可以支持用户对折线图进行缩放和平移操作，以便更好地查看数据的细节。可以使用 transform 属性来实现缩放和平移的效果，同时需要更新坐标轴和数据点的位置。
响应式设计为了适应不同尺寸的屏幕和设备，可以使用 CSS 媒体查询或 JavaScript 来实现折线图的响应式设计。根据视口的宽度和高度，动态调整 SVG 元素和其他元素的大小、位置和样式。
数据更新和刷新如果数据会动态变化，需要在数据更新时重新计算数据点的位置，并更新路径元素和标签元素的属性。可以通过监听数据的变化事件或定时器来触发数据的更新和刷新操作。