我有 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);
}
你需要确定这几个方面。
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);
});