0

Saludos estoy intentado generar un grafico de barras con ChartJS, para lo cual tengo la siguiente data obtenida por consola:

Array(4) [ 1500, 2500, 2500, 2500 ]

asi defino mi ChartJS:

   new Chart(
            document.getElementById("chartjs"),
            {"type":"bar","data":{"labels":["Vendedor1","Vendedor2","Vendedor3", 'Vendedor4'],
            "datasets":[
            {"label":"My First Dataset","data":[data],
            "fill":false,
            "backgroundColor":[
                "rgba(255, 99, 132, 0.2)",
                "rgba(255, 159, 64, 0.2)",
                "rgba(255, 205, 86, 0.2)",
                "rgba(75, 192, 192, 0.2)",
            ],
            "borderColor":["rgb(255, 99, 132)","rgb(255, 159, 64)","rgb(255, 205, 86)","rgb(75, 192, 192)"],
            "borderWidth":1
            }]},
            //"options":{"scales":{"yAxes":[{"ticks":{"beginAtZero":true}}]}}
            }
        );

lo cual no me arroja ningun dato, dado que es un array y los datos deberias ser de la siguiente forma:

data = {1500,2500,2500,2500}

agradezco cualquier sugerencia..!!

1 respuesta 1

1

El problema es que le estás pasando [data] en vez de data por lo que estarías pasándole un array con un único elemento que sería a su vez otro array.

let data =[1500, 2000, 2500, 3000];
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx,
            {"type":"bar","data":{"labels":["Vendedor1","Vendedor2","Vendedor3", 'Vendedor4'],
            "datasets":[
            {"label":"My First Dataset","data":data,
            "fill":false,
            "backgroundColor":[
                "rgba(255, 99, 132, 0.2)",
                "rgba(255, 159, 64, 0.2)",
                "rgba(255, 205, 86, 0.2)",
                "rgba(75, 192, 192, 0.2)",
            ],
            "borderColor":["rgb(255, 99, 132)","rgb(255, 159, 64)","rgb(255, 205, 86)","rgb(75, 192, 192)"],
            "borderWidth":1
            }]},
            //"options":{"scales":{"yAxes":[{"ticks":{"beginAtZero":true}}]}}
            }
        );
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

1
  • genial, era tan basico..gracias..!! Commented el 28 mar. 2019 a las 14:20

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.