我正在设置一个简单的监视解决方案。我使用了DevExtreme脚本来渲染仪表。但是，它们没有提供本机显示在仪表中间的当前值的本地方法。我设法在包含量规的DIV内创建DIV。我已经将容器DIV和包含文本的DIV都设置为position：relative，但是会影响我不想要的量规的位置。
我尝试使用绝对定位，只能使用一种窗口大小。无论窗口的大小/分辨率如何，我都希望文本位置相对于量规相同。
我不确定哪一部分代码有用，所以下面是整个HTML。但是，与量规容器相关的CSS为“ sensor1”，而与量规DIV中的值相关的文本CSS为“ rpm-value-base”
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery341.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<!-- DevExtreme themes -->
<link rel="stylesheet" href="css/dx.common.css">
<link rel="stylesheet" href="css/dx.darkmoon.css">
<!-- DevExtreme library -->
<script type="text/javascript" src="js/dx.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
update();
setInterval(update, 5000);
});
</script>
<style>
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
margin: 0%;
background-color: #131820;
}
.wrapper {
width: 100vw;
height: 100vh;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(3, 1fr);
}
.box {
background-color: #303c4f;
border-radius: 5px;
padding: 5px;
font-size: 150%;
}
.box .box {
background-color: #303c4f;
}
.fan1 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
display: grid;
grid-gap: 0px;
grid-template-rows: 1fr 1fr;
}
.fan2 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
display: grid;
grid-gap: 0px;
grid-template-rows: 1fr 1fr;
}
.fan3 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
display: grid;
grid-gap: 0px;
grid-template-rows: 1fr 1fr;
}
.fan4 {
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 2;
display: grid;
grid-gap: 0px;
grid-template-rows: 1fr 1fr;
}
.fandetails {
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 2;
display: grid;
grid-gap: 10px;
grid-template-rows: 1fr 1fr;
}
.sensor1 {
position: relative;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
}
.sensor2 {
position: relative;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}
.sensor3 {
position: relative;
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
.sensor4 {
position: relative;
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 2;
grid-row-end: 3;
}
.sensor5 {
position: relative;
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 2;
grid-row-end: 3;
}
.rpm-value-base {
position: relative;
color: #ffffff;
font-size: 14px;
text-align: center;
width: 5%;
height: 5%;
left: 45%;
top: 80%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box fan1">
<div id="fan1a" class="box"></div>
<div id="fan1b" class="box"></div>
</div>
<div class="box fan2">
<div id="fan2a" class="box"></div>
<div id="fan2b" class="box"></div>
</div>
<div class="box fan3">
<div id="fan3a" class="box"></div>
<div id="fan3b" class="box"></div>
</div>
<div class="box fan4">
<div id="fan4a" class="box"></div>
<div id="fan4b" class="box"></div>
</div>
<div class="box fandetails">
<div id="fandetailsa" class="box"></div>
<div id="fandetailsb" class="box"></div>
</div>
<div class="box sensor1" id="sensor1id">
<div class="rpm-value-base" id="rpm1-value"></div>
</div>
<div class="box sensor2" id="sensor2id">
</div>
<div class="box sensor3" id="sensor3id">
</div>
<div class="box sensor4" id="sensor4id">
</div>
<div class="box sensor5" id="sensor5id">
</div>
</div>
<script>
$(function() {
var options_fan_speed = {
valueIndicator: {
type: 'triangleMarker',
color: '#ffffff'
},
title: {
font: {
size: 12,
weight: 400,
color: '#ffffff'
}
},
rangeContainer: {
palette: "Pastel",
ranges: [
{ startValue: 0, endValue: 25 },
{ startValue: 25, endValue: 50 },
{ startValue: 50, endValue: 75 },
{ startValue: 75, endValue: 100 }
]
}
};
var options_fan_rpm = {
valueIndicator: {
type: 'triangleMarker',
color: '#ffffff'
},
title: {
font: {
size: 12,
weight: 400,
color: '#ffffff'
}
},
rangeContainer: {
palette: "Pastel",
ranges: [
{ startValue: 0, endValue: 440 },
{ startValue: 440, endValue: 880 },
{ startValue: 880, endValue: 1320 },
{ startValue: 1320, endValue: 1760 },
{ startValue: 1760, endValue: 2200 }
]
}
};
$("#fan1a").dxLinearGauge($.extend(true, {}, options_fan_speed, {
scale: {
startValue: 0, endValue: 100,
tickInterval: 25,
label: {
customizeText: function (arg) {
return arg.valueText;
}
}
},
title: {
text: 'Fan 1 Set Speed (%)',
}
}));
$("#fan1b").dxLinearGauge($.extend(true, {}, options_fan_rpm, {
scale: {
startValue: 0, endValue: 2200,
tickInterval: 440,
},
title: {
text: 'Fan 1 RPM',
}
}));
$("#fan2a").dxLinearGauge($.extend(true, {}, options_fan_speed, {
scale: {
startValue: 0, endValue: 100,
tickInterval: 25,
label: {
customizeText: function (arg) {
return arg.valueText;
}
}
},
title: {
text: 'Fan 2 Set Speed (%)',
}
}));
$("#fan2b").dxLinearGauge($.extend(true, {}, options_fan_rpm, {
scale: {
startValue: 0, endValue: 2200,
tickInterval: 440,
},
title: {
text: 'Fan 2 RPM',
}
}));
$("#fan3a").dxLinearGauge($.extend(true, {}, options_fan_speed, {
scale: {
startValue: 0, endValue: 100,
tickInterval: 25,
label: {
customizeText: function (arg) {
return arg.valueText;
}
}
},
title: {
text: 'Fan 3 Set Speed (%)',
}
}));
$("#fan3b").dxLinearGauge($.extend(true, {}, options_fan_rpm, {
scale: {
startValue: 0, endValue: 2200,
tickInterval: 440,
},
title: {
text: 'Fan 3 RPM',
}
}));
$("#fan4a").dxLinearGauge($.extend(true, {}, options_fan_speed, {
scale: {
startValue: 0, endValue: 100,
tickInterval: 25,
label: {
customizeText: function (arg) {
return arg.valueText;
}
}
},
title: {
text: 'Fan 4 Set Speed (%)',
}
}));
$("#fan4b").dxLinearGauge($.extend(true, {}, options_fan_rpm, {
scale: {
startValue: 0, endValue: 2200,
tickInterval: 440,
},
title: {
text: 'Fan 4 RPM',
}
}));
var options_sensor = {
scale: {
startValue: -10,
endValue: 40,
tickInterval: 5,
label: {
useRangeColors: true
}
},
rangeContainer: {
palette: "Pastel",
ranges: [
{ startValue: -10, endValue: 0, color: '#779ECB' },
{ startValue: 0, endValue: 10 },
{ startValue: 10, endValue: 20 },
{ startValue: 20, endValue: 25 },
{ startValue: 25, endValue: 40 }
]
},
valueIndicator: {
type: "twoColorNeedle",
color: "#779ECB",
secondColor: "#dddddd"
},
title: {
font: { size: 12 }
}
};
$("#sensor1id").dxCircularGauge($.extend(true, {}, options_sensor, {
title: {
text: "Cab 1"
}
}));
$("#sensor2id").dxCircularGauge($.extend(true, {}, options_sensor, {
title: {
text: "Cab 2"
}
}));
$("#sensor3id").dxCircularGauge($.extend(true, {}, options_sensor, {
title: {
text: "Loft"
}
}));
$("#sensor4id").dxCircularGauge($.extend(true, {}, options_sensor, {
title: {
text: "Outside"
}
}));
$("#sensor5id").dxCircularGauge($.extend(true, {}, options_sensor, {
title: {
text: "Inside"
}
}));
});
</script>
</body>
</html>
该图像显示了我如何尝试将量规值文本覆盖在第一个传感器“ cab1”上，该传感器可以工作，但将量规放在页面的下方。其他仪表显示仪表的预期位置。我已突出显示量规值和它创建的“空白”。
答案 0 :(得分：0)
同意我们需要一个可重现的示例，最好将其作为代码段，但是从我所看到的只是形成您的代码的角度来看，我会朝这个方向尝试一些事情：
.rpm-value-base {
position: absolute; left: 0; right: 0, bottom: 10%;
color: #ffffff;
font-size: 14px;
text-align: center;
}
例如尝试从底部而不是从顶部进行绝对定位，当然，您必须使用该值才能看到有效的方法。
答案 1 :(得分：0)
谢谢@exside
在您的示例中，我使用了以下内容，它适用于所有仪表。
.rpm-value {
position: absolute; left: 0%; bottom: 10%;
width: 100%;
color: #dddddd;
font-size: calc(7px + 1vw);
text-align: center;
}
