web-dev-qa-db-fra.com

L'étiquette hAxis est coupée dans le graphique Google

Pour suivre le nombre de visiteurs par quel site Web et faire une analyse sur le même. Nous créons un graphique à colonnes pour afficher le rapport d'analyse sous forme graphique.

Toutes les choses s'affichent correctement sur le graphique, mais nous affichons le nom du site Web sur les haxis. Comme le nom du site Web est trop long comme "www.google.com", www.facebook.com, cette étiquette est coupée sur les haxis.

Le code pour dessiner le graphique est donné ci-dessous:

function createTodayChart(chartData){
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Sources');
  data.addColumn('number', 'Total Sales');

  for (var i in chartData){
    //alert(chartData[i][0]+'=>'+ parseInt(chartData[i][1]));
    data.addRow([chartData[i][0], parseInt(chartData[i][1])]);
  }

  var options = {
    legend: {position:'top'},
    hAxis: {title: 'Sources', titleTextStyle: {color: 'black'}, count: -1, viewWindowMode: 'pretty', slantedText: true},
    vAxis: {title: 'Total Sales (in USD)', titleTextStyle: {color: 'black'}, count: -1, format: '$#'},
    colors: ['#F1CA3A']
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('my_div'));
  chart.draw(data, options);    
}

Les données dans la variable chartData sont sous forme de tableau sous la forme:

var chartData = [];  
cartData.Push('www.w3school.com', 106);  
cartData.Push('www.google.com', 210);

La largeur et la hauteur de "my_div" sont respectivement de 350px et 300px. Nous avons également joint une capture d'écran de ce problème ci-dessous:

enter image description here

Quelqu'un peut-il m'aider à savoir comment éviter ce problème de coupe? Ou, existe-t-il une méthode disponible dans l'API Google Chart pour empêcher cela?

En attente de solution.

google-visualization
18
user2393886

C'est un problème toujours récurrent dans la visualisation google, à mon avis :( Il y a quelques "astuces" que l'on peut expérimenter avec: chartArea et hAxis.textPosition. Voici votre code dans un jsFiddle avec le chartData suivant, reproduisant le problème ci-dessus:

var chartData = [
    ['www.facebook.com', 45],
    ['http://www.google.com', 67],
    ['www.stackoverflow.com', 11]    
];

enter image description here

violon -> http://jsfiddle.net/a6WYw/

chartArea peut être utilisé pour ajuster le "rembourrage" supérieur en prenant de l'espace dans la légende/hAxe ci-dessous ainsi que la hauteur interne des barres (le graphique lui-même sans axe et légende). Par exemple

chartArea: {
   top: 55,
   height: '40%' 
}

Réduira la zone graphique, donnant de la place à la légende sur le hAxis.

enter image description here

violon -> http://jsfiddle.net/Swtv3/

Mon préféré est de placer la légende hAxis à l'intérieur le graphique en

hAxis : { textPosition : 'in' }

Cela honorera les descriptions courtes et longues et ne rendra pas le graphique trop "bizarre" quand il y a quelques chaînes très longues.

enter image description here

violon -> http://jsfiddle.net/7HBmX/

Selon le commentaire - déplacez les étiquettes "in" en dehors du graphique. Il n'y a à ma connaissance aucun moyen natif de le faire, mais nous pouvons toujours modifier le <svg>. Ceci peut être une tâche difficile, mais dans ce cas, nous savons que le seul <text> éléments qui ont le text-anchor="middle" l'attribut est les étiquettes de l'axe h et la description globale de l'axe h. Alors

var y, labels =  document.querySelectorAll('[text-anchor="middle"]');
for (var i=0;i<labels.length-2;i++) { 
   y = parseInt(labels[i].getAttribute('y'));
   labels[i].setAttribute('y', y+30);
}

pour déplacer les étiquettes en dehors du graphique. démo -> http://jsfiddle.net/970opuu0/

enter image description here

30
davidkonrad