Wykres kolumnowy: jak wyświetlić wszystkie etykiety na osi poziomej

Question

Próbowałem pokazać wszystkie etykiety na osi poziomej mojego wykresu, ale nie byłem w stanie tego zrobić!

Próbowałem za pomocą hAxis.showTextEvery = 1 ale nie działa

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

Zasadniczo Chciałbym pokazać również numery "5", "7" i "9", które są aktualnie brakuje w powyższym wykresie.

Tutaj kod JavaScript, bardzo dziękuję.

<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: jest to rozwiązanie opracowałem, po odpowiedzi poniżej (Jeszcze raz dziękujemy!). 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

Twój problem jest związany z ciągłą kontra dyskretnych subtelności w ColumnChart. Zasadniczo masz ciągłe wartości dla etykiet na swoim hAxis, a showTextEvery działa tylko dla dyskretnych. Aby to naprawić, wykonuję następujące czynności:

1. Wszystkie brakujące oceny są wstawiane do wykresu (tj. Jeśli nie ma żadnych wartości w rankingu "3", wstaw zero).
2. Zamów oceny na wykresie. (Wykresy Google może rozwiązać to dla ciebie, ale to prawdopodobnie łatwiej po prostu je zamówić.)
3. Zmiana oceny na {"id":"","label":"ratings","type":"string"},
4. Skorzystaj z showTextEvery: 1 w opcjach

Poniżej jest jakiś kod, który demonstruje to:

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

Oprócz rozwiązania Jeremy'ego, innym podejściem jest utrzymanie przy użyciu wartości ciągłych na hAxis, ale określić liczbę linii siatki chcesz, która powinna być taka sama jak liczba etykiet chcesz. Jeśli chcesz 10 etykiet, od 1 do 10, to powinno działać:

hAxis: { gridlines: { count: 10 } }