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

J'ai essayé d'afficher toutes les étiquettes sur les horizonal axe de mon tableau, mais je n'ai pas été capable de le faire!

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

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

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

Fondamentalement, je voudrais aussi montrer des chiffres "5", "7" et "9" que font actuellement défaut dans le graphique ci-dessus.

Ici 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é, à la suite de 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>

source d'informationauteur MDT

  1. 9

    Votre problème est lié à l'continu ou discret subtilités dans ColumnChart. Fondamentalement, vous avez en permanence des valeurs pour les étiquettes sur votre hAxiset la showTextEvery ne fonctionne que pour les discrets. Pour résoudre ce problème, je voudrais faire le suivant:

    1. Tous vos cotes manquantes inséré dans le tableau (c'est à dire, si il n'y a pas de valeurs à la cote de 3, insérer un zéro).
    2. Ordre de la notation dans le graphique. (Google charts pourrait tri pour vous, mais il est probablement plus facile de les commander.)
    3. Modifier les cotes de {"id":"","label":"ratings","type":"string"},
    4. Utiliser le showTextEvery:1 dans les options

    Ci-dessous est un code qui illustre cela:

    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"]
};
  2. 6

    En plus de Jeremy solution, une autre approche est de garder à l'aide de valeurs continues sur le hAxis, mais de spécifier le nombre de lignes que vous voulez, ce qui devrait être le même que le nombre d'étiquettes que vous souhaitez. Si vous voulez les étiquettes de 10, de 1 à 10, cela devrait fonctionner:

    hAxis: { gridlines: { count: 10 } }