Column chart: how to show all labels on horizontal axis

前端 未结 2 1936
一生所求
一生所求 2020-12-30 05:06

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

I tried using hAxis.showTextEvery=1 but

2条回答
  •  北海茫月
    2020-12-30 05:32

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

提交回复
热议问题