简单图表的数学帮助

Question

我有 5 条水平线，每条距离为 50 像素。第一条水平线应显示最大值，最后一条水平线应显示最小值。现在我有一个包含 4 个具有不同值的项目的数组。基本上我想在水平线上显示线条来显示图表。

var prices = [13000, 11000, 14000, 10000];

我的“问题”是如何将每个项目添加到水平线？我可以使用这样的东西，但这将需要大量工作，另一点是“价格”的值总是不同的。它也可以有这样的值：

[18510, 16020, 12300, 15190];

for (var i = 0; i < prices.length; i+) {
  if (prices[i] >= 14000 && prices[i] < 14001) drawLine(x1, 150, x2, 150);
  if (prices[i] >= 14001 && prices[i] < 14002) drawLine(x1, 149, x2, 149);
  if (prices[i] >= 14002 && prices[i] < 14003) drawLine(x1, 148, x2, 148);
}

Answer 1

你需要确定这几个方面。

1. 范围（最大值和最小值之间的差）
2. 缩放因子（这将有助于将每个价格映射到图表上的相应位置）
3. 确定每条线的 Y 位置。

var prices = [13000, 11000, 14000, 10000];

var maxPrice = Math.max(...prices);
var minPrice = Math.min(...prices);


var totalHeight = 4 * 50;


function getYPosition(price) {
    // How far the price is on the scale from minPrice to maxPrice
    var scale = (price - minPrice) / (maxPrice - minPrice);
    // Calculate y position based on the scale
    return totalHeight - (scale * totalHeight);
}


prices.forEach(price => {
    var yPos = getYPosition(price);
    drawLine(50, yPos, 150, yPos);
});