Question

我有一个由矩形组成的条形图。

我调用一个创建矩形的函数并将其添加到html 5画布中。矩形涂在上面的容器有一个高度。可以说这个高度是200

AddRectangle(xPos,yPos,height,width)

所以我称之为

AddRectangle(0,0,100,20)
AddRectangle(30,0,110,20)
AddRectangle(60,0,120,20)
AddRectangle(90,0,150,20)

这会添加矩形没问题。我的问题是如果矩形的高度非常小，即

AddRectangle(0,0,1,20)
AddRectangle(30,0,4,20)
AddRectangle(60,0,5,20)
AddRectangle(90,0,6,20)

然后它们看起来很小，很难区分哪个是最高值。是否有一些公式我可以用来获得矩形的高度与矩形容器的高度成比例

Answer 1

得到了公式。我必须从最大数字中计算出数字的百分比。最大数量为100％

计算最高数字

        for (var i=0; i<frequincies.length; i++) {
            if (parseInt(frequincies[i]) > parseInt(maxValue)) maxValue = frequincies[i];
        }

从最高数字

获取其他数字的百分比

for (var i=0; i<frequincies.length; i++) {
    var percentage = (parseInt(frequincies[i])) / maxValue;
    percentages.push(percentage);
    }

然后我可以在矩形区域的高度内获得正确的条形高度

percentages[i] * chartHeight

Html5条形图 - 酒吧高度问题

1 个答案: