Question

这是一个简单的数学问题，但由于某种原因，我无法弄清楚正确的公式，一直试图在过去一小时内解决这个问题，但没有成功。

我们假设我们的图表在垂直轴chartMax上有一个最大点，在垂直轴chartMin上有一个最小点，最大屏幕尺寸高度为667，我们希望将此图表放在此屏幕高度内，无论其最小值和最大值如何，它都将始终适合屏幕。

图表有许多点(hMin, hMax)，每个点都由一个高度为h = Math.abs(hMax - hMin)的条形图表示，为了适应屏幕内的所有这些点，我们需要将每个点的高度乘以一个因子，这个因素的公式是什么？

const chartMax = 4000;
const chartMin = 3500;

const screenMax = 667;

const factor = /* math magic */;

const points = [
  Math.abs(4000 - 3900) * factor,
  Math.abs(3800 - 3700) * factor,
  Math.abs(3600 - 3500) * factor,
];

Answer 1

如果您只想在y轴上缩放：

const height = chartMax - chartMin;
const scalar = windowHeight / height;   // scale factor

将点从图表转换为屏幕：

function transformPoint(onChart) {
    return (onChart - chartMin) * scalar; // make lowest point drop to the bottom, and the others drop by the same amount
    // then scale it up from chart space to screen space
}

以下是一个例子：https://jsfiddle.net/bftbqqvv/

将图表缩放到固定的屏幕高度公式

1 个答案: