Highcharts: le Graphique ne permet pas de redimensionner correctement par rendre l'écran plus petit
Je suis à l'aide de HighCharts 4.0.4 et j'ai un graphique avec une légende personnalisé de cette façon:
<div class="wrapper">
<div class="element">
<div id="chart"></div>
</div>
<div class="legend">
Legend
</div>
</div>
La CSS
ressemble à ceci. Le wrapper
est un tableau, de sorte que je peux utiliser dans la légende avec table-cell
un vertical-align: middle
. Je veux avoir les deux 50% de la largeur de la wrapper
.
.wrapper {
display: table;
width: 100%;
}
.element {
display: table-cell;
width: 50%;
}
.legend {
display: table-cell;
width: 50%;
vertical-align: middle;
}
#chart {
width: 100%;
}
Le problème est que, j'ai créé un JSFiddle ici, "running" du code si la sortie/résultat fenêtre est petite, je vois 50%:50%. Le redimensionnement de la fenêtre de sortie et de le rendre plus grand, tout est ok, l'50%:50% est correct, mais la prise de la fenêtre de sortie les plus petits, le graphique ne permet pas de redimensionner correctement.
J'ai vu quelques solutions avec $(window).resize();
. Dans mon cas, j'ai essayé d'utiliser le outerHeight
, mais les valeurs des modifications uniquement si je fais la taille de l'écran plus grand. J'ai donc trouvé cette solution qui fonctionne:
$('#chart').highcharts().setSize(
$(".wrapper").width() / 2, $('#chart').highcharts().height, doAnimation = true
);
Mais est-il aussi une solution qui n'a pas besoin d'utiliser le JavaScript, seulement HTML et CSS?
OriginalL'auteur Tim | 2014-09-19
Vous devez vous connecter pour publier un commentaire.
Cela doit être fait avec juste CSS... pas de redimensionnement fonctions.
essayez d'ajouter
position:absolute
à votre graphique propriété cssLa nouvelle css pour
#chart
devrait ressembler à ceci:Je pense que c'est l'effet que vous voulez.
Vérifier mon Violon
remarque: j'ai enlevé tous redimensionnement Javascript
Suivi:
Si vous avez besoin de redimensionner Highcharts sur la fenêtre de redimensionnement de l'animation, vous pouvez le faire avec cette syntaxe.
Je pense que c'est plus ce que tu voulais, à l'aide de la Highchart
setSize
méthode de l'animation au lieu de CSS)Violon
vertical-align: middle
ne fonctionne pas.afin de rendre
vertical-align: middle
travailler avecposition:absolute;
, vous devez définir la hauteur d'une valeur absolue. - Je mettre à jour mon Violon à démontrer. C'est loin d'être une solution parfaite, mais j'espère que vous donne assez de ce que vous voulez.Ok, ça fonctionne, et c'est centrée verticalement si je l'ai mis pour
.legend
et#chart
la même hauteur.J'ai créé un nouveau Violon à l'aide de Highchart de la méthode setSize sur la fenêtre de l'événement de redimensionnement. Je pense que c'est plus ce que tu voulais.
Dans Highcharts 4.1.5 $("#chartId").highcharts() est de retour indéfini. Elle a changé de nouveau?
OriginalL'auteur Dave Alperovich
Instaed de cellule de tableau, pourquoi vous ne pouvez pas utiliser la valeur par défaut divs avec le
float:left
option?Exemple: http://jsfiddle.net/L9gubqvy/4/
table-cell
, donc je peux l'utiliservertical-align: middle;
.Vous pouvez utiliser une position absolue, supérieure à 50%, et la marge négative haut
Oui, cela peut être fait si je sais que la hauteur de la aligné verticalement conteneur, mais je n'en ai pas, donc je ne peux pas utiliser cette méthode.
Dans le jquery, vous avez une fonction de la hauteur() afin de l'utiliser et de les appeler (css) avec la moitié de la hauteur de la valeur.
OriginalL'auteur Sebastian Bochan
Quelque chose comme cela?
Pour moi, l'utilisation parfait.
CSS:
JS:
http://jsfiddle.net/L9gubqvy/9/
OriginalL'auteur maťo
Ici est un travail Violon
L'astuce consiste à ajouter deux propriétés CSS:
element
obtient unposition: relative;
chart
obtient unposition:absolute;
OriginalL'auteur xpa1492
Pour être honnête, je ne suis pas tout à fait sûr pourquoi votre graphique n'était pas le redimensionnement correctement. Mais j'ai un moyen de le faire sans redimensionnement en JS, en supposant que vous pouvez régler la hauteur de votre enveloppe div.
Tout d'abord, vous ne devriez vraiment pas le style de vos éléments comme des tables, si vous n'êtes pas à l'aide de données tabulaires; j'ai enlevé ce à partir de votre CSS. Deuxièmement, si vous voulez que votre légende centré, il devrait vraiment être à l'intérieur d'un élément séparé qui est à côté de la carte; chacun doit être enveloppé dans le même genre de div. Normalement, je l'appellerais cela une colonne, mais depuis que vous utilisez déjà .élément, qui travaille trop. Il s'flottait à la gauche, avec une largeur de 50%, et d'une hauteur de 100% (ce qui est important, parce que nous ne pouvons pas le centre de la légende à la verticale, à moins que son parent a une hauteur définie.
Ensuite, nous avons un enfant div à l'intérieur de la seconde .élément, qui est .la légende de la classe. Maintenant, nous pouvons plus facilement de la position dans l'espace. Puisque vous ne connaissez pas la hauteur de la légende, vous ne pouvez pas utiliser une marge négative de 50%. Au lieu de cela, vous pouvez utiliser un CSS3 transformer. Il ressemble à ceci:
JSFiddle ici
Cela fonctionne bien parce que la position est basée sur l'élément parent (ou le plus proche de l'ancêtre avec une position bien définie, mais dans ce cas, ce serait la mère), et la transformation est basée sur l'élément lui-même. Ce sera un travail, indépendamment de la légende de la hauteur, du graphique redimensionner correctement, et vous n'avez pas besoin d'utiliser JS pour le faire.
OriginalL'auteur ala8727
Vous ne devriez pas utiliser n'importe quel code JS.
Si vous voulez les cartes pour devenir sensibles, voici le code:
http://jsfiddle.net/L9gubqvy/12/
Voici le CSS:
PS: je vais avoir du mal à enregistrer le code à l'aide de StackOverflow Extrait de Code. Je vais mettre à jour le code plus tard.
OriginalL'auteur Wissam El-Kik
image svg empêche la
table-cell
d'obtenir de plus petits. Solution pour cela est:Voir l'exemple http://jsfiddle.net/FzXEM/9/
Il y a d'autres façons de faire de la charte redimensionner correctement comme l'utilisation de
float: left
ouposition: absolute
mais ensuite il y a d'autres problèmes et que vous ne pouvez utiliservertical-align
en table ou en ligne, les mises en page.OriginalL'auteur Dainius Lukša
essayez d'utiliser cette Violon
je ne suis pas sûr combien il peut vous aider, j'ai juste utilisé Highcharts une partie de la fonctionnalité.
Remarque: Redimensionner la fenêtre de jsfiddle et de l'exécuter s'ajustera en fonction de la fenêtre je ne suis pas sûr pourquoi elle se comporte comme ça
Html
Javascript
CSS //je suis pas passer tout css
Veuillez consulter ce lien où Highchart est sensible http://jsfiddle.net/2gtpA/show/
OriginalL'auteur Manjunath Siddappa