背景：我目前正在迭代機器學習模型并動態更新我的“div”，就像文本標簽一樣。我想采用我目前獲得的值，但我希望它們不僅僅是文本，而是顯示值是什么的單獨條形。
作業示例：這是一個帶注釋的作業示例。需要注意的一點是，在實際代碼中，該predict()函式不斷被呼叫并更新我當前標簽的值。所以目標是更新該函式中每個柱的值。非常感謝將其轉換為條形圖的任何幫助。
let labelContainer = document.getElementById("label-container");
let maxPredictions = 8;
// this object is constantly being updated
let prediction = [
{
"className": "Prediction 1",
"probability": .1
},
{
"className": "Prediction 2",
"probability": .2
},
{
"className": "Prediction 3",
"probability": .05
},
{
"className": "Prediction 4",
"probability": .25
},
{
"className": "Prediction 5",
"probability": .1
},
{
"className": "Prediction 6",
"probability": .20
},
{
"className": "Prediction 7",
"probability": .05
},
{
"className": "Prediction 8",
"probability": .05
}
];
function init() {
for (let i = 0; i < maxPredictions; i ) { // and class labels
labelContainer.appendChild(document.createElement("div"));
}
}
// this function is constantly being called
function predict() {
for (let i = 0; i < maxPredictions; i ) {
const classPrediction =
prediction[i].className ": " prediction[i].probability.toFixed(2);
labelContainer.childNodes[i].innerHTML = classPrediction;
}
}
init();
predict();
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div id="label-container"></div>
</body>我大致目標的視覺示例：
uj5u.com熱心網友回復：
您可以將其用作入門模板。
我乘以* 100視覺的價值。
let labelContainer = document.getElementById("label-container");
let maxPredictions = 8;
// this object is constantly being updated
let prediction = [
{
"className": "Prediction 1",
"probability": .1
},
{
"className": "Prediction 2",
"probability": .2
},
{
"className": "Prediction 3",
"probability": .05
},
{
"className": "Prediction 4",
"probability": .25
},
{
"className": "Prediction 5",
"probability": .1
},
{
"className": "Prediction 6",
"probability": .20
},
{
"className": "Prediction 7",
"probability": .05
},
{
"className": "Prediction 8",
"probability": .05
}
];
function init() {
for (let i = 0; i < maxPredictions; i ) { // and class labels
let el = document.createElement("div")
el.className = 'prediction-bar'
labelContainer.appendChild(el);
}
}
// this function is constantly being called
function predict() {
for (let i = 0; i < maxPredictions; i ) {
const classPrediction =
prediction[i].className ": " prediction[i].probability.toFixed(2);
labelContainer.childNodes[i].innerHTML = `
<div >${classPrediction}</div>
<div >
<div style="width:${prediction[i].probability.toFixed(2)*100}%">${prediction[i].probability.toFixed(2)*100}%
</div>
</div>`;
}
}
init();
predict();#label-container > div {
margin: 0.5em;
}
.prediction-bar {
display: flex;
}
.progress {
flex: 1;
background: #000;
position: relative;
border-radius: 0.25rem;
padding: 0.25rem;
position: relative;
overflow: hidden;
color: #fff;
margin-left: 1rem;
}
.inner-progress {
position: absolute;
left: 0;
top: 0;
height: 100%;
background: red;
text-align: right;
}<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div id="label-container"></div>
</body>uj5u.com熱心網友回復：
為了可視化您的可預測性條，您可以執行我從CSS-tricks - Making Charts with CSS中找到的內容。注意：該代碼段可能無法在此處使用，因此請在上面的鏈接中查看或在codepen.io中進行測驗
dl {
display: flex;
background-color: white;
flex-direction: column;
width: 100%;
max-width: 700px;
position: relative;
padding: 20px;
}
dt {
align-self: flex-start;
width: 100%;
font-weight: 700;
display: block;
text-align: center;
font-size: 1.2em;
font-weight: 700;
margin-bottom: 20px;
margin-left: 130px;
}
.text {
font-weight: 600;
display: flex;
align-items: center;
height: 40px;
width: 130px;
background-color: white;
position: absolute;
left: 0;
justify-content: flex-end;
}
.percentage {
font-size: .8em;
line-height: 1;
text-transform: uppercase;
width: 100%;
height: 40px;
margin-left: 130px;
background: repeating-linear-gradient(
to right,
#ddd,
#ddd 1px,
#fff 1px,
#fff 5%
);
&:after {
content: "";
display: block;
background-color: #3d9970;
width: 50px;
margin-bottom: 10px;
height: 90%;
position: relative;
top: 50%;
transform: translateY(-50%);
transition: background-color .3s ease;
cursor: pointer;
}
&:hover,
&:focus {
&:after {
background-color: #aaa;
}
}
}
@for $i from 1 through 100 {
.percentage-#{$i} {
&:after {
$value: ($i * 1%);
width: $value;
}
}
}
html, body {
height: 500px;
font-family: "fira-sans-2",sans-serif;
color: #333;
}<dl>
<dt>
Browser market share June 2015
</dt>
<dd class="percentage percentage-11"><span class="text">IE 11: 11.33%</span></dd>
<dd class="percentage percentage-49"><span class="text">Chrome: 49.77%</span></dd>
<dd class="percentage percentage-16"><span class="text">Firefox: 16.09%</span></dd>
<dd class="percentage percentage-5"><span class="text">Safari: 5.41%</span></dd>
<dd class="percentage percentage-2"><span class="text">Opera: 1.62%</span></dd>
<dd class="percentage percentage-2"><span class="text">Android 4.4: 2%</span></dd>
</dl>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/410410.html
標籤：
上一篇：使用PHP洗掉或創建HTML