Question

我正在尝试创建一个函数，该函数将2个值作为参数并将其显示在条形图中（常数宽度），以便根据它们的比例填充条形图。

我希望代码（在下面的链接中）更好地解释。

JS

// bar's width is constantly 200px
var lengthOfBar = 200;

// what I want is to display the values visually into the bar
// the divs (line 8 and 9) should fill the 200px width altogether
function range(val1, val2) {
     var exp = val1/200;
     var inc = val2/200;

     $("#bar").append("<div class='b' style='width:" + exp  +"px'></div>");
     $("#bar").append("<div class='c' style='width:" + inc  +"px'></div>");
}

range(1400, 762);

HTML就是这个

<div id="bar"></div>

提前致谢！

Answer 1

您可以通过val1 / (val1 + val2)（对于每个值）获取长度的百分比，并从那里开始计算长度：

var lengthOfBar = 200;

function range(val1, val2) {
    var percentage1 = val1 / (val1 + val2);
    var percentage2 = val2 / (val1 + val2);

    $("#bar").append("<div class='b' style='width:" + lengthOfBar * percentage1 + "px'></div>");
    $("#bar").append("<div class='c' style='width:" + lengthOfBar * percentage2 + "px'></div>");
}

range(1400, 762);

Fiddle

Answer 2

好的，这很容易弄明白。这样就可以了。

// bar's width is constantly 200px
var lengthOfBar = 200;

// what I want is to display the values visually into the bar
// the divs (line 8 and 9) should fill the 200px width altogether
function range(val1, val2) {
     var exp = val1/200;
     var inc = val2/200;
     var ratio = exp + inc;
     var part = 200/ratio;
     $("#bar").append("<div class='b' style='width:" + (part*exp)  +"px'></div>");
     $("#bar").append("<div class='c' style='width:" + (part*inc)  +"px'></div>");
}

range(1400, 762);

在条形图中直观显示两个值

2 个答案: