1
votes

Comment rendre la barre empilée chartJs toujours arrondie lorsque les données sont à 0?

J'ai trouvé ce Fiddle: https://jsfiddle.net/2s09hqLu/ qui s'est empilé graphique arrondi comme je le voulais.Mais le problème est quand une valeur est 0 dans le tableau de données.Elle ne l'arrondit pas.Je veux toujours qu'elle soit arrondie, comment puis-je faire cela?

data: [20, 5, 0, 15, 12, 13]

Comme vous pouvez le voir ici sur le jaune, son plat n'est pas arrondi. Comment puis-je résoudre ce problème?

javascript chart.js

3 commentaires

parce que vous voyez la barre ci-dessous, elle a une valeur et sa barre non arrondie et supérieure a une valeur de 0, donc elle ne s'affiche pas. si vous le souhaitez, vous pouvez définir les deux arrondis.

@turivishal Je n'ai pas compris clairement. Pourrais-tu me montrer mon violon et trouver une réponse?

Réponse ajoutée ci-dessous stackoverflow.com/a/62415397/8987128

3 Réponses :

0
votes

Vous pouvez ajouter une expression supplémentaire à la variable arrondi si son élément est spécifique au rendu. Ce n'est pas la meilleure approche.

var cond = false;

if(this._datasetIndex === 0) {
  var datasets = this._chart.data.datasets;
  var dataset = datasets[this._datasetIndex];
  var currentData = dataset.data[this._index];
  var nextData = datasets[this._datasetIndex + 1].data[this._index]
  cond = currentData !== 0 && nextData === 0;
}

var rounded = this._datasetIndex  === lastVisible || cond;

Vous pouvez également comparer les valeurs de chaque ensemble de données

var rounded = this._datasetIndex  === lastVisible || this._index === 2;

1 commentaires

Je viens de remplacer var arrondi = this._datasetIndex === lastVisible par les exemples ci-dessus et j'ai fonctionné. Peut-être avez-vous changé autre chose.

1
votes

J'ai mis à jour votre numéro de ligne Fiddle uniquement 118 : https://jsfiddle.net/r7hvn2ox/

De:

if (rounded || this._chart.data.datasets[1].data[this._index] == 0) {

À:

if (rounded){

Je connais son correctif pour 2 ensembles de données: [{}, {}] barres, mais cela fonctionnera parfaitement dans toutes les valeurs d'ensembles de données et aussi pour cet exemple.

2 commentaires

Merci pour votre solution.Mais j'ai besoin d'une approche dynamique pour gérer si dataSet a augmenté.J'ai ajouté ma réponse maintenant

Génial, je travaille simplement de manière dynamique, vous l'avez fait.

1
votes

Merci à tous pour les réponses. J'ai essayé ci-dessous et j'ai parfaitement fonctionné pour n'importe quelle quantité d'ensembles de données.

var lastVisible;
  var datasetsLength = this._chart.data.datasets.length;
  this._chart.data.datasets.map((e,index)=>{
    lastVisible=datasetsLength-1;
    //to find the depth of datasets and get non-zero value
    for(var i=lastVisible;i>0;i--){
    if(!this._chart.getDatasetMeta(i).hidden){
      if(this._chart.data.datasets[i].data[this._index] != 0){
        lastVisible = i;
        break;
      }
    }
    } 
  })

3 commentaires

J'ai vérifié que cela ne fonctionnait pas dans 3 ensembles de données, lorsque les premiers ensembles de données ont une valeur et que les deux autres ensembles de données ne fonctionnent pas alors cela ne fonctionne pas jsfiddle.net / qafLy2ct

@turivishal J'ai rencontré un autre problème stackoverflow.com/questions/62423740/... venez ici, expliquons ici

@turivishal J'ai mis à jour ma réponse, vous pouvez vérifier que cela fonctionne