HighCharts pleine largeur problème
Im essayant de faire mon rendu graphique de remplissage de 100% de la div parent, sans succès. Est-il possible que je peux enlever l'espace sur les côtés gauche et droit?
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
margin: 0,
width: 300,
height: 200,
defaultSeriesType: 'areaspline'
},
series: [{
data: [33,4,15,6,7,8, 73,2, 33,4,25],
marker: {
enabled: false
}
}]
});
OriginalL'auteur user2341636 | 2013-05-02
Vous devez vous connecter pour publier un commentaire.
Si vous supprimez les options
width: 300, height: 200
comme ceci:il remplira automatiquement le conteneur.
Comme highcharts doc dit: explicite de la largeur du graphique. Par défaut (lorsque la valeur null) la largeur est calculée à partir de l'offset de la largeur de l'élément conteneur. Par défaut null. il fonctionne
OriginalL'auteur MISJHA
La question est à cause de jquery UI. après le rendu de votre graphique appeler ce code à la redistribution du graphique. Cela a réglé mon problème
Par exemple, lorsque vous avez créé votre diagramme ailleurs:
$("#chartDiv").highcharts().reflow();
Juste un heads-up que j'ai eu un problème similaire lors du rendu des graphiques à l'intérieur d'une Réagir la composante
componentDidMount
. Les étiquettes de l'axe ont été débordant le tableau et n'ont été que partiellement visible jusqu'à ce que j'ai ajoutéchart.reflow()
comme le dernier appel de la méthode.OriginalL'auteur philip mudenyo
Ensemble
minPadding
etmaxPadding
à 0, voir: http://jsfiddle.net/sKV9d/3/OriginalL'auteur Paweł Fus
Essayez ceci :
OriginalL'auteur Duc Anh
Je l'ai résolu en
UPD:
graphique { width: 100%; height: 100%; }
2a. une autre façon est - dans le cas où si pas possible de définir la taille du conteneur pendant le "design" de temps, vous pouvez redistribution tableau après tableau de charge (c'est à dire appeler graphique.brasage(); ):
Voir l'exemple http://jsfiddle.net/yfjLce3o/
Oui, vous avez raison, ce n'est pas une réponse complète. J'ai trouvé un autre, et je vais l'ajouter comme commentaire de l'auteur.
Ne ressemble pas à 100% pour moi, il y a un espace de 3px toujours là.
OriginalL'auteur Andriy B.
Si vous ne fournissez pas
width
propriété pour le diagramme, il faut obtenir automatiquement la largeur du conteneur.Il suffit donc de retirer la largeur du tableau et donner le conteneur
width: 100%
et cela devrait fonctionner.Si vous voulez une largeur spécifique, il suffit de changer la largeur du conteneur à une taille spécifique. Le tableau doit toujours être à 100% de la taille.
JSFiddle
Exemple:
HTML
JS
CSS
OriginalL'auteur Shahar
utilisation updateChart fonction et l'appel de graphique.brasage() à l'intérieur de cette fonction
appel updatechart méthode toutes les 30 secondes à l'aide de tout mécanisme d'actualisation
OriginalL'auteur MukulChakane