Graphique.js toile redimensionner
In ( Android WebView HTML5 erreur de canvas ) j'ai posté une question concernant le tracé des graphiques à l'aide de Graph.bibliothèque js. Le problème que j'ai maintenant c'est que si j'appelle la fonction pour tracer le graphe de multiples fois, la toile redimensionne à chaque fois. Chaque fois que le graphique est redessiné à la même toile, sa taille change également. J'ai aussi essayé de configurer la taille de la toile, mais sans succès.
Quelle pourrait être la raison? Pourquoi la toile redimensionner tous les de temps?
11 réponses
j'ai eu beaucoup de problèmes avec cela, parce qu'après tout cela mon graphique de ligne avait l'air terrible quand la souris planait et j'ai trouvé une façon plus simple de le faire, espérons qu'il aidera:)
utilisez ce tableau.options 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,
ce qui se passe est Graphique.js multiplie la taille de la toile lorsqu'elle est appelée puis tente de la réduire en utilisant CSS, le but étant de fournir des graphes à plus haute résolution pour les appareils à haute densité.
le problème est qu'il ne se rend pas compte qu'il l'a déjà fait, donc quand il est appelé temps successifs, il multiplie la déjà (doublé ou autre) taille à nouveau jusqu'à ce que les choses commencent à se briser. (Ce qui se passe en fait est de vérifier si elle devrait ajouter plus pixels à la toile en changeant L'attribut DOM pour la largeur et la hauteur, s'il y a lieu, en le multipliant par un facteur quelconque, habituellement 2, puis en changeant cela, puis en changeant l'attribut de style css pour maintenir la même taille sur la page.)
par exemple, lorsque vous l'exécutez une fois et que la largeur et la hauteur de votre toile sont réglées à 300, il les règle à 600, puis modifie l'attribut style à 300... mais si vous l'exécutez encore, il voit que la largeur et la hauteur du DOM sont de 600 (cochez l'autre répondre à cette question pour voir pourquoi) et ensuite le fixe à 1200 et la largeur et la hauteur css à 600.
pas la solution la plus élégante, mais j'ai résolu ce problème tout en maintenant la résolution améliorée pour les dispositifs de rétine en réglant simplement la largeur et la hauteur de la toile manuellement avant chaque appel successif à la carte.js
var ctx = document.getElementById("canvas").getContext("2d");
ctx.canvas.width = 300;
ctx.canvas.height = 300;
var myDoughnut = new Chart(ctx).Doughnut(doughnutData);
ça marche pour moi:
<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>
Le fait essentiel est que nous devons régler la taille de la toile dans le div-tag.
dans iOS et Android le navigateur cache la barre d'outils lorsque vous faites défiler, changeant ainsi la taille de la fenêtre qui inturn lead chartjs pour redimensionner le graphe. La solution est de maintenir le rapport d'aspect.
var options = {
responsive: true,
maintainAspectRatio: true
}
cela devrait résoudre votre problème.
comme le suggérait jcmiller11, le réglage de la largeur et de la hauteur aide. Une solution légèrement plus intéressante est de récupérer la largeur et la hauteur de la toile avant de dessiner la carte. Ensuite, utilisez ces nombres pour définir le graphique sur chaque nouveau tirage subséquent du graphique. Cela permet de s'assurer qu'il n'y a pas de constantes dans le code 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);
}
j'ai eu un problème similaire et trouvé votre réponse.. J'ai finalement venu à une solution.
on dirait la source du graphique.js a ce qui suit (probablement parce qu'il n'est pas censé re-rendre et tout à fait différent graphe dans la même toile):
//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);
}
c'est très bien si on l'appelle une fois, mais quand vous redessinez plusieurs fois, vous finissez par changer la taille de L'élément canvas DOM plusieurs fois provoquant la re-taille.
Espère que ça aide!
j'ai dû utiliser une combinaison de plusieurs réponses ici avec quelques modifications mineures.
D'abord, il faut que vous enveloppiez l'élément de toile dans un contenant à niveau de bloc. Je vous le dis, faites pas que l'élément de toile ait des frères et sœurs; que ce soit un enfant solitaire, car il est têtu et gâté . (L'emballage peut ne pas être soumis à des restrictions de calibrage., mais pour des raisons de sécurité, il peut être bon de lui appliquer une hauteur maximale.)
après s'être assuré que les conditions précédentes sont remplies, au début de la carte, assurez-vous que les options suivantes sont utilisées:
var options = {
"responsive": true,
"maintainAspectRatio": false
}
Si vous voulez ajuster la hauteur du graphique, faites-le à l'élément canvas.
<canvas height="500"></canvas>
n'essayez pas de traiter l'enfant d'une autre manière. Cela devrait se traduire par une mise en place satisfaisante et graphique, un qui reste dans son lit paisiblement.
j'ai essayé de redimensionner la toile en utilisant jQuery mais ça ne marchait pas bien. Je pense que CSS3 est la meilleure option que vous pouvez essayer, si vous voulez sur le zoom stationnaire à un certain niveau.
suivant l'option de vol stationnaire d'un autre lien 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);
}
suivez mon lien codepan:
j'ai eu le même genre de problème d'échelle en utilisant un CLI angulaire. J'ai réussi à le faire marcher en retirant cette ligne de l'index.html:
<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
et puis dans l'angular-cli.fichier json, dans la section scripts, en utilisant ceci:
"scripts": ["../node_modules/chart.js/dist/Chart.bundle.min.js"]
Source : mikebarr58
si quelqu'un a des problèmes, j'ai trouvé une solution qui n'implique pas de sacrifier la réactivité, etc.
enveloppez simplement votre toile dans un conteneur div (pas de style) et réinitialisez le contenu du div à une toile vide avec ID avant d'appeler le constructeur de cartes.
exemple:
HTML:
<div id="chartContainer">
<canvas id="myChart"></canvas>
</div>
JS:
$("#chartContainer").html('<canvas id="myChart"></canvas>');
//call new Chart() as usual
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);