Biểu đồ cột: cách hiển thị tất cả các nhãn trên trục ngang

Question

Tôi đã cố gắng hiển thị tất cả các nhãn trên trục ngang của biểu đồ của tôi, nhưng tôi đã không thể làm điều đó!

tôi đã cố gắng sử dụng hAxis.showTextEvery = 1 nhưng không hoạt động

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

Về cơ bản, Tôi muốn cũng hiển thị số "5", "7" và "9" hiện đang mất tích trong bảng xếp hạng trên.

Đây là mã JavaScript, cảm ơn rất nhiều.

<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: này là giải pháp tôi đã phát triển, sau câu trả lời dưới đây (nhờ một lần nữa!). 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

Vấn đề của bạn có liên quan đến liên tục so với sự tinh tế rời rạc trong ColumnChart. Về cơ bản, bạn có các giá trị liên tục cho các nhãn trên hAxis và showTextEvery chỉ hoạt động cho các nhãn riêng biệt. Để khắc phục điều này, tôi sẽ làm như sau:

1. Có tất cả các xếp hạng bị thiếu của bạn được chèn vào biểu đồ (ví dụ: nếu không có giá trị nào ở xếp hạng '3', chèn số không).
2. Đặt hàng xếp hạng trong biểu đồ. (Bảng xếp hạng của Google có thể sắp xếp việc này cho bạn, nhưng nó có khả năng dễ dàng hơn để chỉ ra lệnh cho họ.)
3. Thay đổi xếp hạng để {"id":"","label":"ratings","type":"string"},
4. Sử dụng showTextEvery: 1 trong các tùy chọn

Dưới đây là một số mã đó chứng tỏ này:

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

Ngoài giải pháp của Jeremy, cách tiếp cận khác là tiếp tục sử dụng các giá trị liên tục trên hAxis, nhưng nêu rõ số lượng gridlines bạn muốn, mà nên được giống như số lượng nhãn mà bạn muốn. Nếu bạn muốn 10 nhãn, từ 1 đến 10, điều này sẽ hoạt động:

hAxis: { gridlines: { count: 10 } }