Таблица столбцов: как показать все метки по горизонтальной оси

Я пытаюсь показать все метки на горизонтальной оси моего графика, но я не смог этого сделать!

Я попытался использовать hAxis.showTextEvery = 1, но не работает

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

enter image description here

В принципе, я хотел бы также показать числа "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>

Ответы

Ответ 1

Ваша проблема связана с непрерывными и дискретными тонкостями в ColumnChart. В принципе, у вас есть непрерывные значения для меток на вашем hAxis, а showTextEvery работает только для дискретных. Чтобы исправить это, я бы сделал следующее:

  • У вас есть все ваши недостающие рейтинги, вставленные в диаграмму (т.е. если в рейтинге "3" нет значений, вставьте нуль).
  • Закажите рейтинги на графике. (Карты Google могут сортировать это для вас, но, скорее всего, проще просто их заказать.)
  • Измените оценки на {"id":"","label":"ratings","type":"string"},
  • Используйте 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"]
};

Ответ 2

В дополнение к решению Джереми другой подход заключается в том, чтобы продолжать использовать непрерывные значения на hAxis, но указывать количество требуемых линий сетки, которое должно быть таким же, как и количество нужных меток. Если вам нужно 10 меток, от 1 до 10, это должно работать:

hAxis: { gridlines: { count: 10 } }