web-dev-qa-db-fra.com

Impossible de rendre le graphique js sensible

désolé si je n'ai rien manqué pour résoudre mon problème, j'ai lu et essayé de nombreuses solutions sans qu'aucune d'entre elles ne soit adaptée au problème.

J'ai plusieurs graphiques (de chart.js) sur une seule page, mais je ne peux pas réussir à les rendre réactifs, malgré:

responsive: true,

Le meilleur affichage réactif que j'ai pu obtenir était lors de l'agrandissement de la largeur et de la hauteur de la toile, mais sur la version de bureau, les graphiques étaient affichés sur tout l'écran.

Voici un fiddle.net

Quelqu'un pour m'aider? Merci beaucoup.

javascriptchart.jsresponsive
5
Blue Agency

La réponse est :

1. ajouter une div autour de la toile

par exemple :

<div class="wrapper">
    <canvas width="600" height="250"></canvas>
</div>

2. ajouter de la hauteur à la classe div dans le css 

.wrapper {
height: 500px !important;
}

(ajustez la hauteur comme vous le souhaitez pour le rendu réactif)

8
Blue Agency

Comme je l'ai vu au violon, vous avez donné une hauteur et une largeur fixes à la balise canvas.

Essayez de donner 70% ou 80% de hauteur et de largeur pour la balise canvas. Cela peut résoudre votre problème.

100% peut être donné de grandes cartes complètes en essayant de les limiter à 70 à 80. 

3
Akash Thakkar

Bootstrap a un exemple de page, qui a un graphique (en utilisant chartjs) qui est réactif. Donc, je voudrais indiquer cette URL, qui peut être téléchargée et nous avons un graphique réactif.

Dasbhoard Exemple montrant le graphique reponsive

2
Krishna Vedula

Vous pouvez rendre les divs de conteneur sensibles en utilisant CSS et rendre svg width: 100% et height:100%

Voici mis à jour fiddle fiddle.net

2
Amit

J'ai constaté qu'avec Chart.js, vous avez besoin d'un div contenant où vous manipulez le css (hauteur/largeur), ce qui améliorera la réactivité, mais pas complètement. Il existe certaines contraintes, en particulier en ce qui concerne la largeur, car la div qui contient risque de laisser beaucoup d’espaces blancs sur le bas/les côtés, car le canevas ne s’ajuste pas complètement à la largeur contenant en tant que pourcentage. Ce n'est pas parfait, mais ça marche. 

Donc, comme solution: créez un div contenant pour chaque graphique et placez-le à l'aide de styles CSS pour ce div :)

0
cbll