Mis gráficos están cambiando sus alineaciones debido al tamaño de los nombres de las etiquetas del eje X. El ángulo de los nombres también cambia para que encaje en la vista. No quiero ningún cambio en las alineaciones de los gráficos (que creo que se debe a los nombres impresos en un ángulo) y también quiero que los nombres en el eje X se impriman normalmente. Graficar imágenes de alineación incorrecta .
He intentado usar maxRotation y minRotation a 90 pero aquí todos los valores están inclinados a 90. Quiero que esto se haga dinámico, es decir. el ángulo debe ser 0 o 90 (si el programa quiere cambiar el ángulo).
código chartjs
scales: { y: { beginAtZero : false, ticks: { display: false, }, grid : { display : false, drawTicks : false, drawBorder: false }, }, x: { maxBarThickness: 10, ticks : { color: 'black', maxRotation: 90, minRotation: 0, autoSkip: false, fontSize : 10, }, grid : { display : false, drawTicks : false } } }Código HTML para guardar gráficos
<style> .first { float : left; width: 45%; margin: 10px; } </style> <div class ="first"> <canvas id="Services"></canvas> </div> <div class ="first"> <canvas id="VPN"> </canvas> </div> <div class = "first"> <canvas id="Policy ID"></canvas> </div> <div class = "first"> <canvas id="Source Country"></canvas> </div> <div class = "first"> <canvas id="Source IP"> </canvas> </div> <div class = "first"> <canvas id="Destination IP"></canvas> </div>¿Cómo logro esto donde puedo cambiar el ángulo de inclinación a 90 si es necesario?
Puede cambiarlo dinámicamente en la configuración del gráfico y luego llamar a la actualización en el gráfico de la siguiente manera:
const options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderColor: 'pink' }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], borderColor: 'orange' } ] }, options: { scales: { x: { ticks: { minRotation: 0, maxRotation: 0 } } } } } const ctx = document.getElementById('chartJSContainer').getContext('2d'); const chart = new Chart(ctx, options); document.getElementById("switch").addEventListener("click", () => { chart.options.scales.x.ticks.minRotation = chart.options.scales.x.ticks.minRotation === 0 ? 90 : 0; chart.options.scales.x.ticks.maxRotation = chart.options.scales.x.ticks.maxRotation === 0 ? 90 : 0; chart.update(); }); <body> <button id="switch"> Switch tick rotation </button> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script> </body>