html5 - Cambio de tamaño del lienzo Chart.js
canvas (11)
Como sugirió jcmiller11, establecer el ancho y la altura ayuda. Una solución un poco más agradable es recuperar el ancho y la altura del lienzo antes de dibujar el gráfico. Luego, use esos números para configurar el gráfico en cada redibujado subsecuente del cuadro. Esto asegura que no haya constantes en el código de JavaScript.
ctx.canvas.originalwidth = ctx.canvas.width;
ctx.canvas.originalheight = ctx.canvas.height;
function drawchart() {
ctx.canvas.width = ctx.canvas.originalwidth;
ctx.canvas.height = ctx.canvas.originalheight;
var chartctx = new Chart(ctx);
myNewBarChart = chartctx.Bar(data, chartSettings);
}
En ( error del lienzo de Android WebView HTML5 ) publiqué una pregunta sobre el trazado de gráficos utilizando la biblioteca Graph.js. El problema que tengo ahora es que si llamo a la función para trazar el gráfico varias veces, el lienzo cambia de tamaño cada vez. Cada vez que se redibuja el gráfico al mismo lienzo, su tamaño también cambia. También intenté establecer el tamaño del lienzo pero sin éxito.
¿Cuál podría ser la razón? ¿Por qué el lienzo cambia el tamaño cada vez?
En IOS y Android, el navegador oculta la barra de herramientas cuando se desplaza, lo que cambia el tamaño de la ventana, lo que a su vez genera chartjs para cambiar el tamaño del gráfico. La solución es mantener la relación de aspecto.
var options = {
responsive: true,
maintainAspectRatio: true
}
Esto debería solucionar tu problema.
Esto funciona para mí:
<body>
<form>
[...]
<div style="position:absolute; top:60px; left:10px; width:500px; height:500px;">
<canvas id="cv_values"></canvas>
<script type="text/javascript">
var indicatedValueData = {
labels: ["1", "2", "3"],
datasets: [
{
[...]
};
var cv_values = document.getElementById("cv_values").getContext("2d");
var myChart = new Chart(cv_values, { type: "line", data: indicatedValueData });
</script>
</div>
</form>
</body>
El hecho esencial es que tenemos que establecer el tamaño del lienzo en la etiqueta div.
Lo que sucede es que Chart.js multiplica el tamaño del lienzo cuando se lo llama y luego intenta escalarlo de nuevo usando CSS, con el propósito de proporcionar gráficos de mayor resolución para dispositivos de alta resolución.
El problema es que no se da cuenta de que ya lo ha hecho, así que cuando se lo llama veces sucesivas, multiplica el tamaño ya (duplicado o lo que sea) OTRA VEZ hasta que las cosas comiencen a romperse. (Lo que realmente está sucediendo es que está comprobando si debería agregar más píxeles al lienzo cambiando el atributo DOM por ancho y alto, si debería, multiplicándolo por algún factor, generalmente 2, luego cambiándolo y luego cambiando el estilo css atributo para mantener el mismo tamaño en la página).
Por ejemplo, cuando lo ejecuta una vez y el ancho y la altura de su lienzo se establecen en 300, los establece en 600, luego cambia el atributo de estilo a 300 ... pero si lo ejecuta de nuevo, verá que el ancho y la altura del DOM son 600 (compruebe la otra respuesta a esta pregunta para ver por qué) y luego establece en 1200 y el ancho y la altura de css en 600.
No es la solución más elegante, pero resolví este problema al tiempo que mantuve la resolución mejorada de los dispositivos retina simplemente configurando el ancho y alto del lienzo de forma manual antes de cada llamada sucesiva a Chart.js
var ctx = document.getElementById("canvas").getContext("2d");
ctx.canvas.width = 300;
ctx.canvas.height = 300;
var myDoughnut = new Chart(ctx).Doughnut(doughnutData);
Si alguien tiene problemas, encontré una solución que no implica sacrificar la capacidad de respuesta, etc.
Simplemente envuelva su lienzo en un contenedor div (sin estilo) y restablezca el contenido del div en un lienzo vacío con ID antes de llamar al constructor de Chart.
Ejemplo:
HTML:
<div id="chartContainer">
<canvas id="myChart"></canvas>
</div>
JS:
$("#chartContainer").html(''<canvas id="myChart"></canvas>'');
//call new Chart() as usual
Tenía el mismo tipo de problema de escalamiento que usa Angular CLI. Pude hacerlo funcionar eliminando esta línea del index.html:
<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
y luego en el archivo angular-cli.json, en la sección de scripts, usando esto:
"scripts": ["../node_modules/chart.js/dist/Chart.bundle.min.js"]
Source : mikebarr58
Traté de cambiar el tamaño de Canvas utilizando jQuery, pero no funcionó bien. Creo que CSS3 es la mejor opción que puedes probar, si quieres hacer zoom sobre un cierto nivel.
La siguiente opción de desplazamiento desde otro enlace de codepan:
.style_prevu_kit:hover{
z-index: 2;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1.5);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1.5);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.5);
transition: all 200ms ease-in;
transform: scale(1.5);
}
Sigue mi enlace de codepan:
Tuve muchos problemas con eso, porque después de todo, el gráfico de mi línea se veía horrible cuando el mouse se movía y encontré una forma más sencilla de hacerlo, espero que ayude :)
Opciones predeterminadas de Chart.js:
// Boolean - whether or not the chart should be responsive and resize when the browser does.
responsive: true,
// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
maintainAspectRatio: false,
Tuve que usar una combinación de respuestas múltiples aquí con algunos ajustes menores.
En primer lugar, es necesario que envuelva el elemento canvas en un contenedor de nivel de bloque. Te digo, no dejes que el elemento canvas tenga hermanos; que sea un niño solitario, porque es obstinado y malcriado . (Es posible que la envoltura no necesite restricciones de tamaño, pero por seguridad puede ser bueno tener una altura máxima aplicada).
Después de asegurarse de que se cumplen las condiciones anteriores, al iniciar el gráfico, asegúrese de que se utilizan las siguientes opciones:
var options = {
"responsive": true,
"maintainAspectRatio": false
}
Si desea ajustar la altura del gráfico, hágalo en el nivel del elemento canvas.
<canvas height="500"></canvas>
No intente tratar con el niño de ninguna otra manera. Esto debería dar como resultado una tabla satisfactoriamente distribuida correctamente, una que permanezca en su cuna de manera pacífica.
Tuve un problema similar y encontré tu respuesta. Finalmente llegué a una solución.
Parece que la fuente de Chart.js tiene lo siguiente (presumiblemente porque no se supone que debe volver a representar y un gráfico completamente diferente en el mismo lienzo):
//High pixel density displays - multiply the size of the canvas height/width by the device pixel ratio, then scale.
if (window.devicePixelRatio) {
context.canvas.style.width = width + "px";
context.canvas.style.height = height + "px";
context.canvas.height = height * window.devicePixelRatio;
context.canvas.width = width * window.devicePixelRatio;
context.scale(window.devicePixelRatio, window.devicePixelRatio);
}
Esto está bien si se llama una vez, pero cuando vuelve a dibujar varias veces, termina cambiando el tamaño del elemento DOM de lienzo varias veces, lo que causa el cambio de tamaño.
¡Espero que ayude!
let canvasBox = ReactDOM.findDOMNode(this.refs.canvasBox);
let width = canvasBox.clientWidth;
let height = canvasBox.clientHeight;
let charts = ReactDOM.findDOMNode(this.refs.charts);
let ctx = charts.getContext(''2d'');
ctx.canvas.width = width;
ctx.canvas.height = height;
this.myChart = new Chart(ctx);