0
318
VisualizaçõesChartJS - Fondo de etiquetas
Estoy usando Chart.js para dibujar un gráfico de líneas simple. ¿Cómo puedo hacer que el color de fondo en el área de las etiquetas XAxis y las etiquetas YAxis?
La documentación de Line Chart está aquí: https://www.chartjs.org/docs/2.7.3/getting-started/?h=line , pero no puedo encontrar nada al respecto.
Estas son las áreas a las que quiero aplicar el color de fondo:
Gracias por adelantado.
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
Puede usar la construcción en backgroundColor en la escala, este enfoque solo colorea la parte debajo de chartArea:
var 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: { y: { backgroundColor: 'red' }, x: { backgroundColor: 'yellow' } } } } 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.6.2/chart.js"></script> </body>Si realmente desea toda la longitud, deberá escribir un complemento personalizado:
var 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: { plugins: { scaleBackground: { x: 'red', y: 'yellow', drawXOverY: true } } }, plugins: [{ id: 'scaleBackground', beforeDraw: (chart, args, opts) => { const { scales: { x, y }, ctx, chartArea: { left }, canvas } = chart; if (opts.drawXOverY) { ctx.fillStyle = opts.y || 'transparent'; ctx.fillRect(0, 0, left, canvas.height); ctx.fillStyle = opts.x || 'transparent'; ctx.fillRect(0, x.top, canvas.width, x.bottom); } else { ctx.fillStyle = opts.x || 'transparent'; ctx.fillRect(0, x.top, canvas.width, x.bottom); ctx.fillStyle = opts.y || 'transparent'; ctx.fillRect(0, 0, left, canvas.height); } } }] } 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.6.2/chart.js"></script> </body>
·
Juan Pablo Isaza
Relatório
Responde à pergunta