如何创建 JavaScript 动态折线图：移动一个点时其他点线性移动

2024-03-29 12:46:06

在 JavaScript 中创建动态折线图：移动点时线性移动其他点

在构建交互式图表时，了解如何动态更新数据非常重要。本文将引导你创建折线图，当移动一个点时，其他点将相应地更新其位置，形成一条新的直线。

确定斜率

要更新其他点，我们需要确定折线中所有点的斜率。斜率是任何两点之间 y 值变化与 x 值变化的比率。使用以下公式计算：

斜率 = (y2 - y1) / (x2 - x1)

其中 (x1, y1) 和 (x2, y2) 是相邻两个点的坐标。

计算新点位置

一旦有了斜率，就可以根据移动点的坐标计算其他点的新位置。对于每个点，新 y 值等于原始 y 值加上斜率乘以该点与第一个点的 x 值之差。

新 y 值 = 旧 y 值 + 斜率 * (x 值 - 第一个点的 x 值)

实时更新图表

使用新的 y 值，我们可以更新图表中的点。这将创建一个新的线性折线，其他点线性移动以适应移动的点。

示例代码

以下代码片段演示了如何在 JavaScript 中实现动态折线图：

const chart = new Chart(...);

chart.on('pointMove', (e) => {
  const movedPoint = e.point;
  const slope = (movedPoint.y - chart.data.datasets[0].data[0]) / (movedPoint.x - chart.data.datasets[0].data[0].x);

  for (let i = 1; i < chart.data.datasets[0].data.length; i++) {
    chart.data.datasets[0].data[i].y = movedPoint.y + slope * (chart.data.datasets[0].data[i].x - movedPoint.x);
  }

  chart.update();
});