0
306
Views¿Cómo dibujar el trazo detrás de las rejas en Chart.js?
Escribí un gráfico de barras personalizado en Chart.JS que en el conjunto de datos resalta las barras dibujando un trazo en él, el problema es que el trazo se dibuja sobre las barras, mientras que en su lugar lo convertiría en algo así como 'color de fondo'.
Al igual que las barras son visibles porque la opacidad del color del trazo se establece en 0.05, mientras que si lo configuro en 1, obviamente, ya no serán visibles.
El código
class CustomBar extends Chart.BarController { draw() { super.draw(arguments); if (this.chart.tooltip._active && this.chart.tooltip._active.length) { const points = this.chart.tooltip._active[0]; const ctx = this.chart.ctx; const x = points.element.x; const topY = points.element.y + 150; const width = points.element.width; const bottomY = 0; ctx.save(); ctx.beginPath(); ctx.moveTo(x, topY * 100); ctx.lineTo(x + width * 1.3, bottomY); ctx.lineWidth = width * 4.3; ctx.strokeStyle = 'rgba(0, 0, 0, 0.05)'; ctx.stroke(); ctx.restore(); } } } CustomBar.id = 'shadowBar'; CustomBar.defaults = Chart.BarController.defaults; Chart.register(CustomBar);
·
Juan Pablo Isaza
1 answers
Answer question0
Necesitará un complemento personalizado para esto, allí puede especificar que desea que se dibuje antes de que se dibujen los conjuntos de datos. Puedes hacerlo así:
Chart.register({ id: 'barShadow', beforeDatasetsDraw: (chart, args, opts) => { const { ctx, tooltip, chartArea: { bottom } } = chart; if (!tooltip || !tooltip._active[0]) { return } const point = tooltip._active[0]; const element = point.element; const x = element.x; const topY = -(element.height + 150); const width = element.width; const bottomY = 0; const xOffset = opts.xOffset || 0; const shadowColor = opts.color || 'rgba(0, 0, 0, 1)'; ctx.save(); ctx.beginPath(); ctx.fillStyle = shadowColor; ctx.fillRect(x - (element.width / 2) + xOffset, bottom, width * 1.3 * 4.3, topY); ctx.restore(); } }); const options = { type: 'bar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: 'orange' }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], backgroundColor: 'pink' } ] }, options: { plugins: { barShadow: { xOffset: -10, color: 'red' } } } } const 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.7.0/chart.js"></script> </body>
·
Juan Pablo Isaza
Report
Answer question