柱形图:如何在水平轴上显示所有标签 [英] Column chart: how to show all labels on horizontal axis

问题描述

我一直试图在图表的水平轴上显示所有标签，但我一直无法做到这一点！

I've been trying to show all labels on the horizonal axis of my chart, but I haven't been able to do that!

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

I tried using hAxis.showTextEvery=1 but does not work

(请参见 https://developers.google.com/chart/interactive/docs/gallery/columnchart ).

基本上，我还要显示上面图表中当前缺少的数字"5"，"7"和"9".

这是JavaScript代码，非常感谢.

Here the JavaScript code, thanks a lot.

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

更新: 这是我根据以下答案开发的解决方案(再次感谢！). http://jsfiddle.net/mdt86/x8dafm9u/104/

UPDATE: this is the solution I developed, following the answer below (thanks again!). 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>

推荐答案

您的问题与

Your problem is related to the continuous versus discrete subtleties in ColumnChart. Basically, you have continuous values for labels on your hAxis, and the showTextEvery only works for discrete ones. To fix this, I would do the following:

1. 已将所有缺少的评分插入图表(例如，如果评分"3"处没有值，请输入零).
2. 在图表中订购等级. (Google图表可以为您排序，但订购它们可能会更容易.)
3. 将评分更改为{"id":"","label":"ratings","type":"string"},
4. 在选项中使用showTextEvery:1

1. Have all your missing ratings inserted into the chart (ie, if there are no values at rating '3', insert a zero).
2. Order the ratings in the chart. (Google charts could sort this for you, but it's likely easier to just order them.)
3. Change the ratings to {"id":"","label":"ratings","type":"string"},
4. Use the showTextEvery:1 in the options

下面的代码演示了这一点:

Below is some code that demonstrates this:

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

这篇关于柱形图:如何在水平轴上显示所有标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！