0
203
VistasEl gráfico de barras verticales no se muestra correctamente
Gráfico de barras verticales: 
Quiero lograr esta imagen de gráfico de barras verticales en el enlace anterior, pero el resultado de mi código muestra un gráfico de barras normal. Aquí hay un fragmento del código que estoy usando para generar el gráfico:
<template name="VerticalCharts"> <div class="profile-user-box"> <canvas id="myCharts"></canvas> </div> </template> Template.VerticalCharts.onRendered(function() { var ctx = document.getElementById('myCharts').getContext('2d'); var myCharts = new Chart(ctx, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { responsive: true, plugins: { legend: { position: 'top', }, title: { display: true, text: 'Chart.js Bar Chart' } } }, }); });
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Lo que tiene es un gráfico de barras verticales, si desea barras horizontales, debe establecer indexAxis en 'y' en su objeto de opciones de la siguiente manera:
var options = { type: 'bar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderWidth: 1 }] }, options: { indexAxis: 'y' } } var ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options); <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script> </body>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta