Javascript 动态生成条形图：JS、Jquery、CSS
我有一些代码没有完全工作。。。目前它从数组生成条形图，但我不知道如何传递唯一的高度值。如果我为高度传递一个值，那么所有的条都是相同的高度。如果我为高度值传递一个数组，它将不起作用 我有一个git回购协议，如果有帮助的话 HTMLJavascript 动态生成条形图：JS、Jquery、CSS,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一些代码没有完全工作。。。目前它从数组生成条形图，但我不知道如何传递唯一的高度值。如果我为高度传递一个值，那么所有的条都是相同的高度。如果我为高度值传递一个数组，它将不起作用 我有一个git回购协议，如果有帮助的话 HTML <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="style.c
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<div class="graph-wrapper">
<script id="barGraph-template" type="text/x-handlebars-template">
<div class="bar-wrapper">
<div class="bar"></div>
<div class="title">{{charCount}}</div>
</div>
</script>
</div> <!-- end graph-wrapper -->
</body>
</html>
$(document).ready(function(){
var charArray = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
var charValues = [10, 35, 90, 72, 50, 22, 16, 20, 10, 5, 2, 3, 1];
var templateSource = $('#barGraph-template').html();
var template = Handlebars.compile(templateSource);
for (var key in charArray){
// Bars are all the same height
// $('.bar').css('height','70%');
// This sets all the bars to the same height w/the last value
// in the array
$('.bar').css('height', (charValues[key] + '%');
var graph = {
charCount: charArray[key],
}
var readyTemplate = template(graph);
$('body').append(readyTemplate);
}
});
.graph-wrapper {
border: 1px solid #ccc;
display: flex;
padding: 10px;
}
.bar-wrapper {
/*border: 1px solid #000;*/
display: inline-flex; /*Positions bars side by side*/
flex-direction: column; /*Stacks bar and label*/
justify-content: flex-end; /*Grows bar from bottom*/
align-items: center; /*Aligns bar label and bar on center horizontally*/
height: 200px;
margin: 0px;
}
.title, .bar {
}
.bar {
/*border: 1px solid #000;*/
/*height: 70%;*/
width: 30px;
background: #00AEEF;
bottom: 0px;
-webkit-animation: animate-bar 1.25s 1 linear;
}
.title {
}
@-webkit-keyframes animate-bar {
0% { height: 0%; }
}
你这里有几个问题。首先，每个条都属于类bar，这个
$（'.bar'）.css（'height'，'value'）将类栏的每个元素更改为值的任意高度。其次，在这个字符串中有额外的引号：var value=“””“+charValues[key]+”%“+”。将其更改为var value=charValues[key]+'%'。第三，在将元素添加到dom之前，您正试图访问这些元素。在以下语句之前不会添加它们：
$('body').append(readyTemplate);
下面的代码与您的代码类似，但仍在工作。但是，有一个更干净的解决方案
<script id="barGraph-template" type="text/x-handlebars-template">
<div class="bar-wrapper">
<div class="bar bar{{charCount}}"></div>
<div class="title">{{charCount}}</div>
</div>
</script>
$(document).ready(function(){
var charArray = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
var charValues = [10, 35, 90, 72, 50, 22, 16, 20, 10, 5, 2, 3, 1];
var templateSource = $('#barGraph-template').html();
var template = Handlebars.compile(templateSource);
for (var key in charArray){
var value = charValues[key] + '%';
var graph = {
charCount: charArray[key],
}
var readyTemplate = template(graph);
$('body').append(readyTemplate);
$('.bar'+charArray[key]).css('height',value);
}
});
您在这里遇到了一些问题。首先，每个条都属于类bar，这个$（'.bar'）.css（'height'，'value'）将类栏的每个元素更改为值的任意高度。其次，在这个字符串中有额外的引号：var value=“””“+charValues[key]+”%“+”。将其更改为var value=charValues[key]+'%'。第三，在将元素添加到dom之前，您正试图访问这些元素。在以下语句之前不会添加它们：
$('body').append(readyTemplate);
下面的代码与您的代码类似，但仍在工作。但是，有一个更干净的解决方案
<script id="barGraph-template" type="text/x-handlebars-template">
<div class="bar-wrapper">
<div class="bar bar{{charCount}}"></div>
<div class="title">{{charCount}}</div>
</div>
</script>
$(document).ready(function(){
var charArray = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
var charValues = [10, 35, 90, 72, 50, 22, 16, 20, 10, 5, 2, 3, 1];
var templateSource = $('#barGraph-template').html();
var template = Handlebars.compile(templateSource);
for (var key in charArray){
var value = charValues[key] + '%';
var graph = {
charCount: charArray[key],
}
var readyTemplate = template(graph);
$('body').append(readyTemplate);
$('.bar'+charArray[key]).css('height',value);
}
});
$（'.bar'）.css（'height'，'value'）；//这行不通-我猜是打字错误吧？as“value”不应该用引号括起来。它可能应该是css（'height'，（value+'px'）或其他东西是的，但即使我去掉引号，它仍然不起作用。每个bar类都必须是唯一的吗？我意识到bar类实际上是在获取数组中的最后一个值（1）因为它是值，所以条形图没有自己的唯一值。如果您有同一类的多个元素，并且希望使用jquery对它们进行不同处理，请使用eq（）
，例如：$（'.bar'）.eq（key）.css（'height'，（charValues[key]+'%'））
此行还缺少一个右括号。否则@BarbaraLaird下面的答案看起来不错。$（'.bar'）.css（'height'，'value'）；//这不起作用-我猜键入错误？因为'value'不应该在引号中。它可能应该是css（'height'，'value+'px'））是的，但即使我去掉引号，它仍然不起作用。每个bar类都必须是唯一的吗？我意识到bar类实际上是取数组中的最后一个值（1）因为它是值，所以条形图没有自己的唯一值。如果您有同一类的多个元素，并且希望使用jquery对它们进行不同处理，请使用eq（）
，例如：$（'.bar'）.eq（key）.css（'height'，（charValues[key]+'%'））
此行还缺少一个右括号。否则@BarbaraLaird下面的答案看起来不错。这是一个更优雅、更简洁的解决方案！你能告诉我为什么我的条形包装div没有显示在我的图形包装div中吗？你可以在你的jsfiddle链接上看到这一点-我在图形包装上有一个边框。你正在设置flexbox容器flexbox项上的属性。有关使用flexbox的详细信息，请参阅。当我在条形图上方为“y”标签添加一个div时，条形图的动画设置为向下而不是向上。我似乎无法确定是什么改变了动画的方向：一个更优雅、更干净的解决方案！你能告诉我为什么条形图包装器div没有显示在我的图形中吗apper div？你可以在你的JSFIDLE链接上看到这一点-我在图形包装器上有一个边框。你正在flexbox项目上设置flexbox容器属性。请参阅，了解使用flexbox的一篇精彩文章。当我在条形图上方添加一个div作为“y”标签时，条形图的动画是向下的，而不是向上的。我似乎无法确定是什么改变了动画的方向: