我有3个图表。我希望第三张图表位于中心,但与图表的左侧对齐
现在的图表是这样的:
图片在左侧对齐,我希望图表变得像这样:
我希望图像像这样对齐,这是一段代码:
<!doctype html>
<html>
<head>
<title>Adaptive size</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {
padding: 30px;
margin: 0px;
}
.clear:before,
.clear:after {
content: "";
display: table;
}
.clear:after {
clear: both;
}
.clear {
*zoom: 1;
}
.gauge {
display: block;
float: Left;
border: 1px solid #ddd;
box-sizing: border-box;
margin: 2% 2% 5% 13%;
.size-1 {
width: 30%;
}
.size-2 {
width: 30%;
}
}
.size-3 {
width: 40%;
}
.h-split {
display: block;
float: left;
width: 0%;
min-height: 0px;
}
</style>
</head>
<body>
<div id="jg1" class="gauge size-1"></div>
<div class="h-split"></div>
<div id="jg2" class="gauge size-2"></div>
<div class="h-split"></div>
<div id="jg3" class="gauge size-3"></div>
<div class="h-split"></div>
<div class="clear"></div>
<script src="../raphael-2.1.4.min.js"></script>
<script src="../justgage.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var jg1, jg2, jg3;
var defs1 = {
label: "Weight Left",
value: 65.56,
min: 0,
max: 200,
decimals: 3,
gaugeWidthScale: 0.6,
pointer: true,
pointerOptions: {
toplength: 10,
bottomlength: 10,
bottomwidth: 2
},
counter: true,
relativeGaugeSize: true
}
var defs2 = {
label: "Weight Right",
value: 65,
min: 0,
max: 200,
decimals: 3,
gaugeWidthScale: 0.6,
pointer: true,
pointerOptions: {
toplength: 10,
bottomlength: 10,
bottomwidth: 2
},
counter: true,
relativeGaugeSize: true
}
var defs3 = {
label: "Total Weight",
value: 65,
min: 0,
max: 200,
decimals: 3,
gaugeWidthScale: 0.6,
pointer: true,
pointerOptions: {
toplength: 10,
bottomlength: 10,
bottomwidth: 2
},
counter: true,
relativeGaugeSize: true
}
jg1 = new JustGage({
id: "jg1",
defaults: defs1
});
jg2 = new JustGage({
id: "jg2",
defaults: defs2
});
jg3 = new JustGage({
id: "jg3",
defaults: defs3
});
});
</script>
</body>
</html>
我如何像第二张图片一样对齐图表?
最佳答案
这样就可以了。
我从size-3
移除了浮子,并确保清除前两个压力表。然后将margin: 0 auto;
添加到size-3
类以使其居中。
document.addEventListener("DOMContentLoaded", function(event) {
var jg1, jg2, jg3;
var defs1 = {
label: "Weight Left",
value: 65.56,
min: 0,
max: 200,
decimals: 3,
gaugeWidthScale: 0.6,
pointer: true,
pointerOptions: {
toplength: 10,
bottomlength: 10,
bottomwidth: 2
},
counter: true,
relativeGaugeSize: true
}
var defs2 = {
label: "Weight Right",
value: 65,
min: 0,
max: 200,
decimals: 3,
gaugeWidthScale: 0.6,
pointer: true,
pointerOptions: {
toplength: 10,
bottomlength: 10,
bottomwidth: 2
},
counter: true,
relativeGaugeSize: true
}
var defs3 = {
label: "Total Weight",
value: 65,
min: 0,
max: 200,
decimals: 3,
gaugeWidthScale: 0.6,
pointer: true,
pointerOptions: {
toplength: 10,
bottomlength: 10,
bottomwidth: 2
},
counter: true,
relativeGaugeSize: true
}
jg1 = new JustGage({
id: "jg1",
defaults: defs1
});
jg2 = new JustGage({
id: "jg2",
defaults: defs2
});
jg3 = new JustGage({
id: "jg3",
defaults: defs3
});
});
body {
padding: 30px;
margin: 0px;
}
.clear:before,
.clear:after {
content: "";
display: table;
}
.clear:after {
clear: both;
}
.clear {
*zoom: 1;
}
.gauge {
display: block;
float: Left;
border: 1px solid #ddd;
box-sizing: border-box;
margin: 2% 2% 5% 13%;
}
.size-1 {
width: 30%;
}
.size-2 {
width: 30%;
}
.size-3 {
width: 40%;
margin: 0 auto;
float: none;
}
.h-split {
display: block;
float: left;
width: 0%;
min-height: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/justgage/1.2.9/justgage.min.js"></script>
<div id="jg1" class="gauge size-1"></div>
<div class="h-split"></div>
<div id="jg2" class="gauge size-2"></div>
<div class="h-split"></div>
<div class="clear"></div>
<div id="jg3" class="gauge size-3"></div>
<div class="h-split"></div>
<div class="clear"></div>
关于javascript - 如何对齐3个不同的图表?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53423711/