柱狀圖：如何在水平軸上顯示所有標籤

Question

我一直試圖在圖表的水平軸上顯示所有標籤，但我一直無法做到！

我嘗試使用hAxis.showTextEvery = 1但不工作

（見https://developers.google.com/chart/interactive/docs/gallery/columnchart）。

基本上，我想也顯示數字「5」，「7」和「9」當前缺少上述圖表英寸

這裏的JavaScript代碼，非常感謝。

<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： 這是我開發的，下面的答案後的溶液（再次感謝！）。 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

您的問題是在ColumnChart相關的連續與離散的微妙之處。基本上，您的hAxis標籤上有連續值，而showTextEvery只適用於離散標籤。爲了解決這個問題，我會做以下事情：

1. 把所有缺少的評分插入圖表（即，如果在評分'3'沒有值，插入一個零）。
2. 在圖表中訂購評級。 （谷歌的圖表可以解決這對你，但它可能更容易只是爲了他們。）
3. 更改評級{"id":"","label":"ratings","type":"string"},
4. 使用showTextEvery：1在選項

下面是一些代碼，演示這樣的：

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

除了傑里米的解決方案，另一種方法是保持在hAxis使用連續的值，但指定要網格線的數量，這應該是相同的，只要你想標籤的數量。如果你想要10個標籤，1到10，這應該工作：

hAxis: { gridlines: { count: 10 } }