0
223
ViewsActualice dinámicamente el gráfico de barras usando javascript/html/css
Contexto: actualmente estoy iterando a través de un modelo de aprendizaje automático y actualizando dinámicamente mis "divs" como etiquetas de texto. Me gustaría tomar los valores que estoy obteniendo actualmente, pero en lugar de que solo sean texto, me gustaría que fueran barras individuales que muestren cuál es el valor.
Ejemplo de trabajo: aquí hay un ejemplo de trabajo con comentarios. Una cosa a tener en cuenta es que en el código real, la función predict() se llama constantemente y actualiza los valores de mis etiquetas actuales. Entonces, el objetivo es actualizar el valor de cada barra en esa función. Cualquier ayuda para convertir esto en un gráfico de barras es realmente apreciada.
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>Ejemplo visual de lo que busco aproximadamente:
·
Juan Pablo Isaza
2 answers
Answer question0
Esto es algo con lo que podría trabajar como plantilla de inicio.
Multipliqué el valor * 100 para imágenes.
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>
·
Juan Pablo Isaza
Report
0
Para visualizar sus barras de previsibilidad, puede hacer algo como lo que encontré en CSS-tricks - Making Charts with CSS . nota: es posible que el fragmento no funcione aquí, así que revíselo en el enlace de arriba o pruébelo en 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>
·
Juan Pablo Isaza
Report
Answer question