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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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