Google visualization 柱状图：如何在水平轴上显示所有标签

我一直试图在图表的水平轴上显示所有标签，但我没能做到

我尝试使用hAxis.showTextEvery=1，但不起作用

（见附件）

基本上，我还想显示上表中目前缺失的数字“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> 

setOnLoadCallback（drawChart1）；
函数drawChart1（）{
var data=new google.visualization.DataTable(
{
“科尔斯”：[
{“id”：“”“标签”：“评级”，“类型”：“编号”}，
{“id”：“，”label”：“#of movies”，“type”：“number”}]，
“行”：[
{“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}]}
]});
变量选项={
“标题”：“评级分布”，
“vAxis”：{“title”：“电影之歌”，“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\u movies\u per\u rating'））；chart.draw（数据、选项）；
}

更新： 这是我根据下面的答案开发的解决方案（再次感谢！）。

setOnLoadCallback（drawChart1）；
函数drawChart1（）{
var data=新google.visualization.DataTable（
{“cols”：
[{“id”：“”“标签”：“评级”，“类型”：“字符串”}，
{“id”：“，”label”：“#of movies”，“type”：“number”}]，
“行”：
[{“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}]}
]
}
); 
变量选项=
{“标题”：“评级分布”，
“vAxis”：{“title”：“电影之歌”，“minValue”：0}，
“hAxis”：{“title”：“Ratings”，“maxValue”：10}，
“图例”：“无”，
“is3D”：没错，
“宽度”：800，
“高度”：400，
“颜色”：[“CC0000”]}；
var chart=new google.visualization.ColumnChart（document.getElementById（'chart\u movies\u per\u rating'））；
图表绘制（数据、选项）；
} 

您的问题与工作中的连续与离散微妙之处有关。基本上，

hAxis

上的标签具有连续值，而

showTextEvery

仅适用于离散值。要解决此问题，我将执行以下操作：

将所有缺失的评分插入图表（即，如果评分“3”处没有值，则插入零）

在图表中排列评级。（谷歌图表可以为您排序，但只需排序可能更容易。）

将评级更改为

{“id”：“，”标签“：”评级“，”类型“：”字符串“}，

使用选项中的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"]
};

---

除了Jeremy的解决方案外，另一种方法是继续在hAxis上使用连续值，但指定所需的网格线数量，该数量应与所需的标签数量相同。如果需要10个标签，从1到10，这应该可以：

hAxis: { gridlines: { count: 10 } }

---

这显示了10个标签，但带有十进制值，而不是0-1-2-3…-10，即：2.8 3.6 4.4 5.2 6.0 6.8 7.6 8.4 9.2 10.0无论如何，谢谢！在这种情况下，还需要将viewWindow.min和.max设置为1和10。如果你想包括0和10，那么gridlines.count应该是11。我知道showTextEvery的文档说它只适用于离散的hAxis，但它适用于连续的（日期）hAxis。这里：你在hAxis下的更新代码中没有缺少

showTextEvery:1

？（正如@Jeremy Faller的回答所述）如下文所述，不，对于我来说，步骤4，即showTextEvery:1是不需要的。看我的书

hAxis: { gridlines: { count: 10 } }