0
113
VistasChart.js - hacer que el texto de fondo responda
Estoy usando chart.js para la visualización.
Estoy usando la biblioteca para crear el siguiente gráfico:
function createConfig(legendPosition, colorName) { return { type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], datasets: [{ label: 'My First Dataset', data: [-91, -85, -70, -96, 70, -81, -85, -66, 47, 26, -7, -4], backgroundColor: "", borderColor: 'rgb(100, 73, 216)', borderWidth: 1 }] }, options: { responsive: true, legend: { position: legendPosition, }, scales: { xAxes: [{ display: true, scaleLabel: { display: true, labelString: 'Month' } }], yAxes: [{ display: true, scaleLabel: { display: true, labelString: 'Value' } }] }, } }; } window.onload = function(e) { var ctx = document.getElementById('chart-legend-bottom').getContext('2d'); var config = createConfig('bottom', 'purple'); let myLineExtend = Chart.controllers.line.prototype.draw; Chart.helpers.extend(Chart.controllers.line.prototype, { draw: function() { myLineExtend.apply(this, arguments); this.chart.chart.ctx.textAlign = "center" this.chart.chart.ctx.font = "40px Roboto black"; this.chart.chart.ctx.fillText("www.google.com", 450, 150) } }); new Chart(ctx, config); }; <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script> <body> <canvas id="chart-legend-bottom" width="600" height="400"></canvas> </body>Al mostrar el ejemplo anterior en un dispositivo móvil, el texto insertado no se escala con el gráfico.
¿Alguna sugerencia sobre cómo escalar el texto con el tamaño de la pantalla?
¡Agradezco sus respuestas!
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Puede hacer uso de la API de Plugin Core . Ofrece diferentes ganchos que pueden usarse para ejecutar código personalizado. En su caso, podría usar el gancho afterDraw para dibujar texto en una posición calculada a partir de chart.scales .
Eche un vistazo a su código modificado y vea cómo funciona.
new Chart('chart-legend-bottom', { type: 'line', plugins: [{ afterDraw: chart => { let xAxis = chart.scales['x-axis-0']; let yAxis = chart.scales['y-axis-0']; let x = (xAxis.left + xAxis.right) / 2; let y = yAxis.getPixelForValue(0); let ctx = chart.chart.ctx; ctx.save(); ctx.font = '40px Roboto black'; ctx.textAlign = 'center'; ctx.fillText('www.google.com', x, y); ctx.restore(); } }], data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], datasets: [{ label: 'My First Dataset', data: [-91, -85, -70, -96, 70, -81, -85, -66, 47, 26, -7, -4], backgroundColor: "", borderColor: 'rgb(100, 73, 216)', borderWidth: 1 }] }, options: { responsive: true, legend: { position: 'bottom' }, scales: { xAxes: [{ display: true, scaleLabel: { display: true, labelString: 'Month' } }], yAxes: [{ display: true, scaleLabel: { display: true, labelString: 'Value' } }] } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script> <canvas id="chart-legend-bottom" width="600" height="400"></canvas>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta