web-dev-qa-db-fra.com

Diagramme à colonnes: comment afficher toutes les étiquettes sur l'axe horizontal

J'ai essayé de montrer toutes les étiquettes sur l'axe horizontal de mon graphique, mais je n'ai pas pu le faire!

J'ai essayé d'utiliser hAxis.showTextEvery = 1 mais ne fonctionne pas

(voir https://developers.google.com/chart/interactive/docs/gallery/columnchart ).

enter image description here

Fondamentalement, je voudrais également afficher les nombres "5", "7" et "9" qui manquent actuellement dans le tableau ci-dessus.

Voici le code JavaScript, merci beaucoup.

<script type="text/javascript">
 google.setOnLoadCallback(drawChart1);
 function drawChart1(){
     var data = new google.visualization.DataTable(
     {
        "cols":[
            {"id":"","label":"ratings","type":"number"},
            {"id":"","label":"# of movies","type":"number"}],
            "rows":[
                {"c":[{"v":9},{"v":26}]},
                {"c":[{"v":8},{"v":64}]},
                {"c":[{"v":10},{"v":5}]},
                {"c":[{"v":7},{"v":50}]},
                {"c":[{"v":6},{"v":38}]},
                {"c":[{"v":5},{"v":10}]},
                {"c":[{"v":2},{"v":1}]},
                {"c":[{"v":4},{"v":1}]}
            ]});

     var options = {
        "title":"Rating distribution",
        "vAxis":{"title":"# of movies","minValue":0},
        "hAxis":{"title":"Ratings","maxValue":10},"legend":"none","is3D":true,"width":800,"height":400,"colors":["red"]
     };
     var chart = new google.visualization.ColumnChart(document.getElementById('chart_movies_per_rating'));chart.draw(data, options);
 }
 </script>

MISE À JOUR: c'est la solution que j'ai développée, en suivant la réponse ci-dessous (merci encore!). http://jsfiddle.net/mdt86/x8dafm9u/104/

<script type="text/javascript">
google.setOnLoadCallback(drawChart1); 
function drawChart1(){ 
var data = new google.visualization.DataTable( 
     {"cols": 
        [{"id":"","label":"ratings","type":"string"},
        {"id":"","label":"# of movies","type":"number"}], 
             "rows":
             [{"c":[{"v":"0"},{"v":0}]},
             {"c":[{"v":" 1"},{"v":0}]},
             {"c":[{"v":" 2"},{"v":1}]},
             {"c":[{"v":" 3"},{"v":0}]},
             {"c":[{"v":" 4"},{"v":1}]},
             {"c":[{"v":" 5"},{"v":10}]},
             {"c":[{"v":" 6"},{"v":38}]},
             {"c":[{"v":" 7"},{"v":50}]},
             {"c":[{"v":" 8"},{"v":64}]},
             {"c":[{"v":" 9"},{"v":26}]},
             {"c":[{"v":" 10"},{"v":5}]}
             ]
        }
 ); 

 var options = 
    {"title":"Rating distribution",
    "vAxis":{"title":"# of movies","minValue":0},
    "hAxis":{"title":"Ratings","maxValue":10},
    "legend":"none",
    "is3D":true,
    "width":800,
    "height":400,
    "colors":["CC0000"]};
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_movies_per_rating'));
    chart.draw(data, options);
 } 
    </script>
google-visualization
14
MDT

Votre problème est lié aux subtilités continues et discrètes dans ColumnChart . Fondamentalement, vous avez des valeurs continues pour les étiquettes sur votre hAxis, et la showTextEvery ne fonctionne que pour les étiquettes discrètes. Pour résoudre ce problème, je ferais ce qui suit:

  1. Ayez toutes vos notes manquantes insérées dans le tableau (c.-à-d., S'il n'y a aucune valeur à la note "3", insérez un zéro).
  2. Commandez les notes dans le tableau. (Les graphiques Google peuvent trier cela pour vous, mais il est probablement plus facile de simplement les commander.)
  3. Remplacez les notes par {"id":"","label":"ratings","type":"string"},
  4. Utilisez le showTextEvery: 1 dans les options

Vous trouverez ci-dessous un code qui le démontre:

var data = new google.visualization.DataTable(
{
  "cols":[
    {"id":"","label":"ratings","type":"string"},
    {"id":"","label":"# of movies","type":"number"}],
  "rows":[
    {"c":[{"v":'10'},{"v":5}]},
    {"c":[{"v":'9'}, {"v":26}]},
    {"c":[{"v":'8'}, {"v":64}]},
    {"c":[{"v":'7'}, {"v":50}]},
    {"c":[{"v":'6'}, {"v":38}]},
    {"c":[{"v":'5'}, {"v":10}]},
    {"c":[{"v":'4'}, {"v":1}]},
    {"c":[{"v":'3'}, {"v":0}]},
    {"c":[{"v":'2'}, {"v":1}]},
    {"c":[{"v":'1'}, {"v":0}]},
  ]});

var options = {
  "title":"Rating distribution",
  "vAxis":{"title":"# of movies","minValue":0},
  "hAxis":{"title":"Ratings",showTextEvery:1},
  "legend":"none",
  "width":800,"height":400,"colors":["red"]
};
11
Jeremy Faller

En plus de la solution de Jeremy, une autre approche consiste à continuer à utiliser des valeurs continues sur le hAxis, mais spécifiez le nombre de quadrillages que vous voulez, qui devrait être le même que le nombre d'étiquettes que vous souhaitez. Si vous voulez 10 étiquettes, 1 à 10, cela devrait fonctionner:

hAxis: { gridlines: { count: 10 } }
6
dlaliberte