Istogramma: come mostrare tutte le etichette sull'asse orizzontale

Question

Ho cercato di mostrare tutte le etichette sull'asse orizzontale del mio grafico, ma non sono stato in grado di farlo!

Ho provato utilizzando hAxis.showTextEvery = 1 ma non funziona

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

Fondamentalmente, desidero mostrare anche i numeri "5", "7" e "9" che sono attualmente mancanti nella tabella di cui sopra.

Qui il codice JavaScript, grazie mille.

<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> 

UPDATE: questa è la soluzione che ho sviluppato, in seguito alla risposta qui sotto (grazie ancora!). 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> 

Answer 1

Il tuo problema è legato al continuo rispetto sottigliezze discreti in ColumnChart. Fondamentalmente, hai i valori continui per le etichette sul tuo hAxis e lo showTextEvery funziona solo per quelli discreti. Per risolvere il problema, farei quanto segue:

1. Tutte le valutazioni mancanti inserite nel grafico (cioè, se non ci sono valori con rating '3', inserire uno zero).
2. Ordinare le valutazioni nella tabella. (Google grafici potrebbero risolvere la questione per voi, ma è probabile che più facile semplicemente ordinare.)
3. Cambiare i feedback per {"id":"","label":"ratings","type":"string"},
4. Utilizzare la showTextEvery: 1 nelle opzioni

Di seguito è riportato un codice che dimostra questo:

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

Answer 2

Oltre alla soluzione di Jeremy, un altro approccio è quello di continuare a utilizzare valori continui sulla hAxis, ma specificare il numero di linee della griglia che si desidera, che dovrebbe essere lo stesso del numero di etichette che si desidera. Se vuoi 10 etichette, da 1 a 10, questo dovrebbe funzionare:

hAxis: { gridlines: { count: 10 } }