我在这个仪表板上有几个径向和线性仪表。我希望能够打印出每个仪表在仪表旁边读取的值。是否有任何功能可以在HTML或CSS中执行此操作？
<!DOCTYPE html>
<html>
<head>
<title>Data Metrics</title>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/jszip.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script></head>
<body style="background-color: black">
<table border= 2px>
<tr>
<td style="color: White">Overall Risk</td>
<td style="width: 300px">
<div id="overall_gauge"></div>
<script>
$("#overall_gauge").kendoRadialGauge({
pointer: {
color: "Red",
value: 71.8,
},
scale: {
majorUnit: 10,
majorTicks: {
color: "white",
},
minorUnit: 5,
minorTicks: {
color: "white",
},
startAngle: -40,
endAngle: 220,
max: 100,
labels: {
color: "white",
template: "#= value #%"
},
ranges: [
{
from: 0,
to: 20,
color: "Red"
}, {
from: 20,
to: 40,
color: "#ff6600"
},
{
from: 40,
to: 60,
color: "Orange"
},
{
from: 60,
to: 80,
color: "Yellow"
}
,
{
from: 80,
to: 100,
color: "Green"
}
]
}
});
</script>
</td>
</tr>
</table>
<table border="2px">
<tr>
<td style="color:white">Security Systems</td>
<td>
<div id="1st_gauge"></div>
<script>
$("#1st_gauge").kendoRadialGauge({
pointer: {
color: "Red",
value: 92,
},
scale: {
majorTicks: {
color: "white",
},
minorUnit: 5,
minorTicks: {
color: "white",
},
startAngle: -30,
endAngle: 210,
max: 100,
labels: {
color: "white",
template: "#= value #%"
},
ranges: [
{
from: 0,
to: 20,
color: "Red"
}, {
from: 20,
to: 40,
color: "#ff6600"
},
{
from: 40,
to: 60,
color: "Orange"
},
{
from: 60,
to: 80,
color: "Yellow"
}
,
{
from: 80,
to: 100,
color: "Green"
}
]
}
});
</script>
</td>
<td style="color:white">Patching</td>
<td>
<div id="2nd_gauge"></div>
<script>
$("#2nd_gauge").kendoRadialGauge({
pointer: {
color: "Red",
value: 100,
},
scale: {
majorTicks: {
color: "white",
},
minorUnit: 5,
minorTicks: {
color: "white",
},
startAngle: -30,
endAngle: 210,
max: 100,
labels: {
color: "white",
template: "#= value #%"
},
ranges: [
{
from: 0,
to: 20,
color: "Red"
}, {
from: 20,
to: 40,
color: "#ff6600"
},
{
from: 40,
to: 60,
color: "Orange"
},
{
from: 60,
to: 80,
color: "Yellow"
}
,
{
from: 80,
to: 100,
color: "Green"
}
]
}
});
</script>
</td>
<td style="color:white">Congifuration</td>
<td>
<div id="3rd_gauge"></div>
<script>
$("#3rd_gauge").kendoRadialGauge({
pointer: {
color: "Red",
value: 80,
},
scale: {
majorTicks: {
color: "white",
},
minorUnit: 5,
minorTicks: {
color: "white",
},
startAngle: -30,
endAngle: 210,
max: 100,
labels: {
color: "white",
template: "#= value #%"
},
ranges: [
{
from: 0,
to: 20,
color: "Red"
}, {
from: 20,
to: 40,
color: "#ff6600"
},
{
from: 40,
to: 60,
color: "Orange"
},
{
from: 60,
to: 80,
color: "Yellow"
}
,
{
from: 80,
to: 100,
color: "Green"
}
]
}
});
</script>
</td>
<td style="color:white">Network</td>
<td>
<div id="4th_gauge"></div>
<script>
$("#4th_gauge").kendoRadialGauge({
pointer: {
color: "Red",
value: 60,
},
scale: {
majorTicks: {
color: "white",
},
minorUnit: 5,
minorTicks: {
color: "white",
},
startAngle: -30,
endAngle: 210,
max: 100,
labels: {
color: "white",
template: "#= value #%"
},
ranges: [
{
from: 0,
to: 20,
color: "Red"
}, {
from: 20,
to: 40,
color: "#ff6600"
},
{
from: 40,
to: 60,
color: "Orange"
},
{
from: 60,
to: 80,
color: "Yellow"
}
,
{
from: 80,
to: 100,
color: "Green"
}
]
}
});
</script>
</td>
<td style="color:white">Applications</td>
<td>
<div id="5th_gauge"></div>
<script>
$("#5th_gauge").kendoRadialGauge({
pointer: {
color: "Red",
value: 35,
},
scale: {
majorTicks: {
color: "white",
},
minorUnit: 5,
minorTicks: {
color: "white",
},
startAngle: -30,
endAngle: 210,
max: 100,
labels: {
color: "white",
template: "#= value #%"
},
ranges: [
{
from: 0,
to: 20,
color: "Red"
}, {
from: 20,
to: 40,
color: "#ff6600"
},
{
from: 40,
to: 60,
color: "Orange"
},
{
from: 60,
to: 80,
color: "Yellow"
}
,
{
from: 80,
to: 100,
color: "Green"
}
]
}
});
</script>
</td>
<td style="color:white">Awareness</td>
<td>
<div id="6th_gauge"></div>
<script>
$("#6th_gauge").kendoRadialGauge({
pointer: {
color: "Red",
value: 55,
},
scale: {
majorTicks: {
color: "white",
},
minorUnit: 5,
minorTicks: {
color: "white",
},
startAngle: -30,
endAngle: 210,
max: 100,
labels: {
color: "white",
template: "#= value #%"
},
ranges: [
{
from: 0,
to: 20,
color: "Red"
}, {
from: 20,
to: 40,
color: "#ff6600"
},
{
from: 40,
to: 60,
color: "Orange"
},
{
from: 60,
to: 80,
color: "Yellow"
}
,
{
from: 80,
to: 100,
color: "Green"
}
]
}
});
</script>
</td>
</tr>
</table>
<table border = "2px" align="right">
<tr>
<td style="color:yellow">Infrastructure Controls</td>
<td style="width: 500px;height:250px">
<div id="linear-gauge11"></div>
<script>
$("#linear-gauge11").kendoLinearGauge({
pointer: {
color: "Blue",
value: 15,
},
scale: {
vertical: false,
majorTicks: {
color: "white",
},
minorUnit: 5,
minorTicks: {
color: "white",
},
max: 100,
labels: {
color: "white",
template: "#= value #%"
},
ranges: [
{
from: 0,
to: 20,
color: "Red"
}, {
from: 20,
to: 40,
color: "#ff6600"
},
{
from: 40,
to: 60,
color: "Orange"
},
{
from: 60,
to: 80,
color: "Yellow"
}
,
{
from: 80,
to: 100,
color: "Green"
}
]
}
});
</script>
<div id="linear-gauge12"></div>
<script>
$("#linear-gauge12").kendoLinearGauge({
pointer: {
color: "Blue",
value: 45,
},
scale: {
vertical: false,
majorTicks: {
color: "white",
},
minorUnit: 5,
minorTicks: {
color: "white",
},
max: 100,
labels: {
color: "white",
template: "#= value #%"
},
ranges: [
{
from: 0,
to: 20,
color: "Red"
}, {
from: 20,
to: 40,
color: "#ff6600"
},
{
from: 40,
to: 60,
color: "Orange"
},
{
from: 60,
to: 80,
color: "Yellow"
}
,
{
from: 80,
to: 100,
color: "Green"
}
]
}
});
</script>
<div id="linear-gauge13"></div>
<script>
$("#linear-gauge13").kendoLinearGauge({
pointer: {
color: "Blue",
value: 35,
},
scale: {
vertical: false,
majorTicks: {
color: "white",
},
minorUnit: 5,
minorTicks: {
color: "white",
},
max: 100,
labels: {
color: "white",
template: "#= value #%"
},
ranges: [
{
from: 0,
to: 20,
color: "Red"
}, {
from: 20,
to: 40,
color: "#ff6600"
},
{
from: 40,
to: 60,
color: "Orange"
},
{
from: 60,
to: 80,
color: "Yellow"
}
,
{
from: 80,
to: 100,
color: "Green"
}
]
}
});
</script>
</td>
</tr>
<tr>
<td style="color:yellow">Preventative Controls</td>
<td><div id="linear-gauge21"></div>
<script>
$("#linear-gauge21").kendoLinearGauge({
pointer: {
color: "Blue",
value: 95,
},
scale: {
vertical: false,
majorTicks: {
color: "white",
},
minorUnit: 5,
minorTicks: {
color: "white",
},
max: 100,
labels: {
color: "white",
template: "#= value #%"
},
ranges: [
{
from: 0,
to: 20,
color: "Red"
}, {
from: 20,
to: 40,
color: "#ff6600"
},
{
from: 40,
to: 60,
color: "Orange"
},
{
from: 60,
to: 80,
color: "Yellow"
}
,
{
from: 80,
to: 100,
color: "Green"
}
]
}
});
</script>
<div id="linear-gauge22"></div>
<script>
$("#linear-gauge22").kendoLinearGauge({
pointer: {
color: "Blue",
value: 75,
},
scale: {
vertical: false,
majorTicks: {
color: "white",
},
minorUnit: 5,
minorTicks: {
color: "white",
},
max: 100,
labels: {
color: "white",
template: "#= value #%"
},
ranges: [
{
from: 0,
to: 20,
color: "Red"
}, {
from: 20,
to: 40,
color: "#ff6600"
},
{
from: 40,
to: 60,
color: "Orange"
},
{
from: 60,
to: 80,
color: "Yellow"
}
,
{
from: 80,
to: 100,
color: "Green"
}
]
}
});
</script>
<div id="linear-gauge23"></div>
<script>
$("#linear-gauge23").kendoLinearGauge({
pointer: {
color: "Blue",
value: 35,
},
scale: {
vertical: false,
majorTicks: {
color: "white",
},
minorUnit: 5,
minorTicks: {
color: "white",
},
max: 100,
labels: {
color: "white",
template: "#= value #%"
},
ranges: [
{
from: 0,
to: 20,
color: "Red"
}, {
from: 20,
to: 40,
color: "#ff6600"
},
{
from: 40,
to: 60,
color: "Orange"
},
{
from: 60,
to: 80,
color: "Yellow"
}
,
{
from: 80,
to: 100,
color: "Green"
}
]
}
});
</script>
</td>
</tr>
<tr>
<td style="color:yellow">Detective Controls</td>
<td><div id="linear-gauge31"></div>
<script>
$("#linear-gauge31").kendoLinearGauge({
pointer: {
color: "Blue",
value: 65,
},
scale: {
vertical: false,
majorTicks: {
color: "white",
},
minorUnit: 5,
minorTicks: {
color: "white",
},
max: 100,
labels: {
color: "white",
template: "#= value #%"
},
ranges: [
{
from: 0,
to: 20,
color: "Red"
}, {
from: 20,
to: 40,
color: "#ff6600"
},
{
from: 40,
to: 60,
color: "Orange"
},
{
from: 60,
to: 80,
color: "Yellow"
}
,
{
from: 80,
to: 100,
color: "Green"
}
]
}
});
</script>
<div id="linear-gauge32"></div>
<script>
$("#linear-gauge32").kendoLinearGauge({
pointer: {
color: "Blue",
value: 30,
},
scale: {
vertical: false,
majorTicks: {
color: "white",
},
minorUnit: 5,
minorTicks: {
color: "white",
},
max: 100,
labels: {
color: "white",
template: "#= value #%"
},
ranges: [
{
from: 0,
to: 20,
color: "Red"
}, {
from: 20,
to: 40,
color: "#ff6600"
},
{
from: 40,
to: 60,
color: "Orange"
},
{
from: 60,
to: 80,
color: "Yellow"
}
,
{
from: 80,
to: 100,
color: "Green"
}
]
}
});
</script>
<div id="linear-gauge33"></div>
<script>
$("#linear-gauge33").kendoLinearGauge({
pointer: {
color: "Blue",
value: 10,
},
scale: {
vertical: false,
majorTicks: {
color: "white",
},
minorUnit: 5,
minorTicks: {
color: "white",
},
max: 100,
labels: {
color: "white",
template: "#= value #%"
},
ranges: [
{
from: 0,
to: 20,
color: "Red"
}, {
from: 20,
to: 40,
color: "#ff6600"
},
{
from: 40,
to: 60,
color: "Orange"
},
{
from: 60,
to: 80,
color: "Yellow"
}
,
{
from: 80,
to: 100,
color: "Green"
}
]
}
});
</script>
</td>
</tr>
</table>
</body>
</html>
答案 0 :(得分：1)
由于您的仪表已经是JavaScript，具有硬编码值，因此创建纯css解决方案毫无意义。
通过使用jQuery的.after()功能，您可以在所选元素之后立即向文档添加内容。
这是一个衡量标准的例子（作为我将JS分开的奖励）：
jQuery().ready(function() {
var overallValue = 71.8;
$("#overall_gauge").kendoRadialGauge({
pointer: {
color: "Red",
value: overallValue,
},
scale: {
majorUnit: 10,
majorTicks: {
color: "white",
},
minorUnit: 5,
minorTicks: {
color: "white",
},
startAngle: -40,
endAngle: 220,
max: 100,
labels: {
color: "white",
template: "#= value #%"
},
ranges: [
{
from: 0,
to: 20,
color: "Red"
}, {
from: 20,
to: 40,
color: "#ff6600"
},
{
from: 40,
to: 60,
color: "Orange"
},
{
from: 60,
to: 80,
color: "Yellow"
}
,
{
from: 80,
to: 100,
color: "Green"
}
]
}
}).closest('td').after('<td>' + overallValue + '</td>');
});<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/jszip.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
<table border= 2px>
<tr>
<td style="color: White">Overall Risk</td>
<td style="width: 300px">
<div id="overall_gauge"></div>
</td>
</tr>
</table>
此外，您可能希望使用一些CSS而不是表。