使用 javascript/html/css 动态更新条形图答案

【问题标题】：Dynamically update bar chart using javascript/html/css使用 javascript/html/css 动态更新条形图
【发布时间】：2022-01-13 20:11:45
【问题描述】：

上下文：我目前正在迭代机器学习模型并动态更新我的“div”，就像文本标签一样。我想采用我目前获得的值，但我希望它们不仅仅是文本，而是显示值是什么的单独条形。

工作示例：这是一个使用 cmets 的工作示例。需要注意的一点是，在实际代码中，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>

我的大致目标的视觉示例：

【问题讨论】：

代码在问题本身中必须始终正确。请使用<> 按钮创建一个可运行的sn-p。仅当 StackOverflow sn-ps 不足时，才可接受外部代码链接。
@connexo 已更新！

标签： javascript html css

【解决方案1】：

您可以将其用作入门模板。

我将 * 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 class="name-progress">${classPrediction}</div>
            <div class="progress">
              <div class="inner-progress" 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>

【讨论】：

这太棒了！非常感谢您的帮助，我很感激。

【解决方案2】：

为了可视化您的可预测性条，您可以执行我在 CSS-tricks - Making Charts with CSS 中找到的类似操作。注意：sn-p 在这里可能不起作用，请在上面的链接中查看或在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>

【讨论】：