我只是将一些图表放在一些 div 中。当我使用 .append() 添加图例时，所有其他 div 都位于不同的高度。我究竟做错了什么？我需要做什么才能使它们都坐在同一高度？
当我将图例添加到圆环图时出现问题。
我把我正在做的事情弄得一团糟:https://jsfiddle.net/3oxo8ee9/
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { position: absolute;}
.dataPic {
display: inline-block;
position: relative;
border: 1px solid black;
height: 700px;
}
.dataPic > div{
margin-top: 5px
}
.doughnut-legend li{
display: inline-block;
}
.doughnut-legend span{
margin: 5px;
padding: 5px;
border-radius: 5px;
}
</style>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="dataPic">
<canvas id="radar1" height="400" width="400"></canvas>
</div>
<div class="dataPic">
<canvas id="bar1" height="400" width="400"></canvas>
</div>
<div class="dataPic doughnutDiv">
<canvas id="doughnut1" height="400" width="400"></canvas>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/ChartJs/Chart.min.js"></script>
<script>
function createRadarChart(id, radarChartData) {
window.myRadar = new Chart(document.getElementById(id).getContext(
"2d")).Radar(radarChartData, {
responsive : false
});
}
function createBarChart(id, barChartData){
var ctx = document.getElementById(id).getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive : false
});
}
function createDoughnut(id, doughnutChartData){
var ctx = document.getElementById(id).getContext("2d");
window.myDoughnut = new Chart(ctx).Doughnut(doughnutChartData, {responsive : false});
//$('.doughnutDiv').append(window.myDoughnut.generateLegend());
}
window.onload = function() {
var radarChartData1 = {
labels : [ "Eating", "Drinking", "Sleeping", "Designing", "Coding",
"Cycling", "Running" ],
datasets : [ {
label : "My First dataset",
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : [ 65, 59, 90, 81, 56, 55, 40 ]
}, {
label : "My Second dataset",
fillColor : "rgba(151,187,205,0.2)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(151,187,205,1)",
data : [ 28, 48, 40, 19, 96, 27, 100 ]
} ]
};
createRadarChart("radar1", radarChartData1)
var barChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data : [80,80,80,80,80,80,80]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,0.8)",
highlightFill : "rgba(151,187,205,0.75)",
highlightStroke : "rgba(151,187,205,1)",
data : [50,50,50,50,50,50,50]
}
]
}
createBarChart("bar1", barChartData)
var doughnutData = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
},
{
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
},
{
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}
];
createDoughnut("doughnut1", doughnutData);
}
</script>
</body>
</html>
最佳答案
答案原来是给违规元素，在本例中为 .dataPic 规则:
vertical-align: middle;
关于html - 当我将此 ul 添加到 div 时，它之前的 div 位置较低。我怎样才能让他们坐在同一高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34724790/