2017-09-17 1 views
1

J'ai des lignes étranges entre les barres horizontales dans Chart.js. Même si je mets barPercentage: 1,categoryPercentage: 1,. J'ai également essayé toutes les combinaisons de [0.90, 1]. S'il vous plaît aider!Lignes étranges entre les barres horizontales dans Chart.js 2.0

Voici ce que j'ai

enter image description here

new Chart(elem, { 
 
    type: 'horizontalBar', 
 
    data: { 
 
     labels: data.map(i => REGIONS[i.region]), 
 
     datasets: [{ 
 
     data: data.map(i => i[name]), 
 
     }], 
 
    }, 
 
    options: { 
 
     legend: { 
 
     display: false, 
 
     labels: { 
 
      padding: 20, 
 
     } 
 
     }, 
 
     scales: { 
 
     xAxes: [{ 
 
      gridLines: { 
 
      display: true, 
 
      // lineWidth: 0, 
 
      drawTicks: false, 
 
      drawBorder: false, 
 
      // zeroLineWidth: 1, 
 
      }, 
 
     }], 
 
     yAxes: [{ 
 
      barPercentage: .99, // I've also tried all from [0.90, 1] 
 
      categoryPercentage: .98, // I've also tried all from [0.90, 1] 
 
      ticks: { 
 
      padding: 25, 
 
      }, 
 
     }] 
 
     }, 
 
    } 
 
    });

Répondre

0

J'ai donc essayé votre code avec quelques exemples de données, je reçois le bon résultat, je me sers de la dernière Chart.js (Version 2.7.0) et cela fonctionne bien quand je mets barPercentage et le categoryPercentage à 1, Si vous rencontrez toujours ce problème,

Mon point majeur dans cette réponse est!

Les valeurs barPercentage et categoryPercentage peuvent être augmenté au-dessus 1 vous pouvez donc donner 1.05 pour résoudre ce problème.

Voici un JSFiddle avec quelques exemples de données que j'ai mockés pour montrer la solution.

JSFiddle Demo

S'il vous plaît ne hésitez pas à essayer cette solution, si les suggestions ci-dessus ne fonctionnent pas, s'il vous plaît reproduire le problème dans le jsFiddle j'ai fourni et me montrer à nouveau la question!

+0

@ ІвченкоДима Cela vous aide-t-il? –

+1

Oui. Merci beaucoup. Mon erreur était que j'utilise 'barPercentage, categoryPercentage' pas les deux égaux à 1. Donc la combinaison pour les deux avec float a donné ce problème. –

+0

@ ІвченкоДима De rien !! –