1

Estoy trabajando con Charts y necesito mostrar en un gráfico de torta algunos resultados. Este el código Javascript del Chart puro

var ctxP = document.getElementById("pieChart").getContext('2d');

var myPieChart = new Chart(ctxP, {
    type: 'pie',
    data: {
        labels: ["Red", "Green", "Yellow", "Grey", "Dark Grey"],
        datasets: [
            {
                data: [600, 50, 100, 40, 120],
                backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
                hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"]
            }
        ]
    },
    options: {
        responsive: true
    }    
});

En mi HTML tengo el siguiente código, el cual me llena un input hidden por cada "brand" que yo traiga desde el backend

<div class="col-12 my-5 d-flex justify-content-center">
    <input th:each="b : ${brands}" type="hidden" th:value="${b.name}" class="brands">
    <canvas id="pieChart" style="max-width: 40%;"></canvas>
</div>

Entonces al renderizar ese codigo y al momento de inspeccionar el codigo de la pagina se puede apreciar (en este caso) lo siguiente.

<input type="hidden" value="Intels" class="brands">
<input type="hidden" value="AMD" class="brands">
<input type="hidden" value="Western Digital" class="brands">
<input type="hidden" value="Intel" class="brands">
<input type="hidden" value="GeForce" class="brands">
<input type="hidden" value="Example" class="brands">
<input type="hidden" value="ExampleBrand" class="brands">

El problema es que, con mi poca experiencia con Javascript, no he podido pasar cada nombre (value) de mis elementos brands a Javascript para asi mostrarlos en el grafico de torta. He intentado de la siguiente forma pero obtengo algunos errores los cuales los pongo como comentarios.

var b = document.getElementsByClassName("brands");
var brands = [];

for (brand in b) {
    brands.push(b);
}

console.log(brands.length); //ME DEVUELVE 10 Y NO 7. 

for (brand in brands) {
    console.log(brand.value); // ME DEVUELVE UNDEFINED 10 VECES.
}

Entonces lo que yo necesito es obtener cada elemento con la clase "brands" y el valor de cada uno guardarlo en esta linea del Chart para que en vez de salir colores me salgan mis "brands". Saludos cordiales.

labels: ["Red", "Green", "Yellow", "Grey", "Dark Grey"]
0

2 respuestas 2

1

Puedes usar el nivel del elemento. Puede accesar a todos los inputs con atributos específicos. Para este caso, usted puede hacer lo siguiente:

var b = document.querySelectorAll("input.brands");
var brands = [];

for (index = 0; index < b.length; ++index) {
    brands.push(b[index])
}

for (brand in brands) {
    console.log(brand.value);
}
0

Parece que el renderizador de html es thymeleaf prueba renderizando directamente el javascript, si está antes de que cargue el resto de scripts, "losBrands" contendrá el contenido de brands

<script type="text/javascript" th:inline="javascript"> 
      var losBrands = /*[[${brands}]]*/ [{name:'brand1'}, {name:'brand2'}];
</script> 

<div class="col-12 my-5 d-flex justify-content-center">
    <canvas id="pieChart" style="max-width: 40%;"></canvas>
</div>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.