Morris.JS L'Axe Des X Hauteur D'Étiquette

J'ai un graphique généré avec Morris.JS mais les étiquettes de l'axe des x sont longues et la coupe en raison de la faible hauteur de la zone, montrant les étiquettes.

Le code ci-dessous rendrait un graphique qui montre la partielle de l'étiquette de "COMTÉ de PARK ROAD ELEM.". Comment puis-je régler la hauteur de la zone d'étiquette pour afficher le texte en entier?

Le code est comme suit

if ($('#IP1').length){ 

    Morris.Bar({
      element: 'IP1',
      data: [           
            {x: 'COUNTY PARK ROAD ELEM.', yIndex: 376.92}                   
      ],
      xkey: 'x',
      ykeys: ['yIndex'],
      labels: ['Index Points'],
      ymax: 500,
      barRatio: 0.2,
      xLabelAngle: 45,
      hideHover: 'auto'
    });
}

OriginalL'auteur Aaron | 2013-10-31

13

La solution qui a fonctionné pour moi a été d'augmenter la taille de la balise svg
```
$('svg').height(700);
```
OriginalL'auteur emamut
6

En plus de l'augmentation de la hauteur de l'élément qui contient le graphique vous pouvez également définir un rembourrage en option sur votre Morris.Bar pour donner plus de place pour les étiquettes de l'axe des x.
```
Morris.Bar({
  ...
  padding: 50,
  ...
});
```
merci, a passé beaucoup de temps à trouver comment faire pour supprimer les espaces quand axes désactiver. De la conception a résolu mon problème!

OriginalL'auteur Shadwell
2

Essayer de changer (actuellement sans papiers) xLabelMargin option à une valeur inférieure, il définit la marge minimale entre les étiquettes sur l'axe des abscisses. Si les étiquettes sont plus près de la marge, alors qu'ils ne seront pas dessinés.

par exemple:
```
Morris.Bar({
  //...
  xLabelMargin: 10
})
```
https://github.com/morrisjs/morris.js/issues/235

OriginalL'auteur YoungStacker

si à l'intérieur d'une directive, vous pouvez utiliser les éléments suivants:

//in pixels
var heightToAdd = 30;    
var svg = element.find("svg")[0];
svg.height.baseVal.value += heightToAdd;

OriginalL'auteur user1240792

0

Simple d'Ajouter de la plongée comme suit
```
<div id="chart"></div>
```
Et ajouter style-dessus de la div comme
```
#chart{
  height:400px;
}
```
OriginalL'auteur Rahul Bhatia

Vous devez vous connecter pour publier un commentaire.