web-dev-qa-db-fra.com

Chart.JS espacement et remplissage

  1. Est-il possible d'obtenir plus d'espace entre le graphique et l'axe des x? 
  2. Est-il possible d'obtenir plus d'espace entre le côté droit du graphique et l'extrémité de la zone de travail? Je souhaite ajouter quelques éléments supplémentaires à la grille juste à côté du graphique, mais cela n’est pas possible car le graphique prend toute la largeur de la grille afin qu’elle se chevauche.

enter image description here

chart.js
6
ectbxksp

Décalage vertical des étiquettes d'axe x

Le moyen le plus simple consiste à 1. ajouter des espaces à vos étiquettes x. Pour ce faire, vous pouvez étendre votre type de graphique et remplacer votre fonction d’initialisation (augmentez de 30 à quelque chose de plus grand si vos étiquettes sont longues au début).

initialize: function(data){
    data.labels.forEach(function(item, index) {
        data.labels[index] += Array(Math.max(30 - item.length, 0)).join(" ");
    })
    Chart.types.Bar.prototype.initialize.apply(this, arguments);
},

Edit: Comme indiqué dans les commentaires, cela provoque également un décalage horizontal et l'étiquette ne s'aligne plus avec les marqueurs de l'axe des x. 

Etant donné que les étiquettes des axes x et x sont dessinées dans une seule fonction et que vous n'avez aucune autre variable avec laquelle vous pouvez jouer (en toute sécurité), cela signifie que vous devrez changer la fonction d'affichage de l'échelle réelle. 

Cherchez un ctx.translate vers la fin de la fonction draw et changez le en 

ctx.translate(xPos, (isRotated) ? this.endPoint + 22 : this.endPoint + 18);

Vous devrez également ajuster le point final (ce qui détermine les limites de y) de manière à ce que le décalage en y supplémentaire ne provoque pas le débordement des étiquettes dans le graphique (recherchez la ligne qui l'ajuste dans le remplacement du tracé pour 2.).

Laissant un espace vide du côté droit

Pour faire 2, vous remplacez votre fonction de dessin (dans votre graphique étendu) et changez xScalePaddingRight. Cependant, puisque cela n’affecte pas vos lignes de grille horizontales, vous devez superposer un rectangle plein une fois votre dessin terminé. Votre fonction de dessin complète ressemblerait à ceci

draw: function(){
    // this line is for 1.
    if (!this.scale.done) {
         this.scale.endPoint -= 20
         // we should do this only once
         this.scale.done = true;
    }
    var xScalePaddingRight = 120
    this.scale.xScalePaddingRight = xScalePaddingRight
    Chart.types.Bar.prototype.draw.apply(this, arguments);
    this.chart.ctx.fillStyle="#FFF";
    this.chart.ctx.fillRect(this.chart.canvas.width - xScalePaddingRight, 0, xScalePaddingRight, this.chart.canvas.height);
}

Violon original - https://jsfiddle.net/gvdmxc5t/

Fiddle avec la fonction de dessin d’échelle modifiée - https://jsfiddle.net/xgc6a77a/ (j’ai désactivé l’animation dans celle-ci afin que le point final ne soit décalé qu’une seule fois, mais vous pouvez simplement le coder en dur, ou ajouter de code pour qu'il ne soit fait qu'une fois)

9
potatopeelings

L'option 'tickMarkLength' étend les lignes de la grille à l'extérieur du graphique et abaisse les graduations.

xAxes: [
        {
            gridLines: {
              tickMarkLength: 15  
            },
        }
]
4
Sebastian Volta

utilisez ceci pour chartjs 2.0  

scales: {
    xAxes: [{
        barPercentage: 0.9,
        categoryPercentage: 0.55
}]

Référence

2
diEcho