javascript - Google可视化设置列停靠

我正在努力与谷歌图表。我希望条从底部而不是从顶部显示。目前，它们正在“悬挂”，如下图所示：



我没有在docs中看到正确的设置，如果存在，请更正我。这是负责处理显示的代码：

function parseInterval(value) {
    var result = new Date(1,1,1);
    result.setMilliseconds(value*1000);
    return result;
}

(function($) {
    $(document).ready(function(){
        var loading = $('#loading');
        $.getJSON("/api/v1/users", function(result) {
            var dropdown = $("#user_id");
            $.each(result, function(item) {
                dropdown.append($("<option />").val(this.user_id).text(this.name));
            });
            dropdown.show();
            loading.hide();
        });
        $('#user_id').change(function(){
            var selected_user = $("#user_id").val();
            var chart_div = $('#chart_div');
            if(selected_user) {
                loading.show();
                chart_div.hide();
                $.getJSON("/api/v1/mean_time_month/"+selected_user, function(result) {
                    $.each(result, function(index, value) {
                        value[1] = parseInterval(value[1]);
                    });
                    var data = new google.visualization.DataTable();
                    data.addColumn('string', 'Month');
                    data.addColumn('datetime', 'Mean time (h:m:s)');
                    data.addRows(result);
                    var options = {
                        hAxis: {
                            title: 'Month'
                        },
                        vAxis: {
                            title: 'Mean presence time',
                            minValue: new Date(1, 1, 1, 0, 0)
                        },

                    };
                    var formatter = new google.visualization.DateFormat({pattern: 'HH:mm:ss'});
                    formatter.format(data, 1);
                    chart_div.show();
                    loading.hide();
                    var chart = new google.visualization.ColumnChart(chart_div[0]);
                    chart.draw(data, options);
                });
            }
        });
    });
})(jQuery);

最佳答案

尝试使用选项vAxis.direction ...


  沿垂直轴的值增长的方向。指定-1以反转值的顺序。

vAxis: {
  direction: -1
}

请参阅以下工作片段...

google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Month');
  data.addColumn('datetime', 'Mean time (h:m:s)');
  data.addRows([
    ['Jan', new Date(1, 1, 1, 8, 16, 13)],
    ['Feb', new Date(1, 1, 1, 9, 24, 45)],
    ['Mar', new Date(1, 1, 1, 7, 36, 56)],
    ['Apr', new Date(1, 1, 1, 4, 20, 42)],
    ['May', new Date(1, 1, 1, 6, 51, 16)]
  ]);

  var options = {
    hAxis: {
      title: 'Month'
    },
    vAxis: {
      direction: -1,
      title: 'Mean presence time',
      minValue: new Date(1, 1, 1, 0, 0)
    }
  };
  var formatter = new google.visualization.DateFormat({pattern: 'HH:mm:ss'});
  formatter.format(data, 1);
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

但我认为真正的问题在于数据

注意上例中图表显示的y轴值，
顺序和范围（上午10点至上午12点）似乎不正确

看来您只对时间值感兴趣

因此，建议使用'timeofday'与'datetime'
（请参阅-> working with timeofday）


  DataTable 'timeofday'列数据类型采用3或4个数字组成的数组，分别表示小时，分钟，秒和可选的毫秒。使用timeofday与使用date和datetime不同，因为值不是特定于日期的，而date和datetime始终指定日期。
  
  例如，时间8:30 am将是：[8, 30, 0, 0]，第4个值是可选的（[8, 30, 0]将输出相同的'timeofday'值）。


请参阅以下工作片段，例如使用'timeofday' ...

google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Month');
  data.addColumn('timeofday', 'Mean time (h:m:s)');
  data.addRows([
    ['Jan', [8, 16, 13]],
    ['Feb', [9, 24, 45]],
    ['Mar', [7, 36, 56]],
    ['Apr', [4, 20, 42]],
    ['May', [6, 51, 16]]
  ]);

  var options = {
    hAxis: {
      title: 'Month'
    },
    vAxis: {
      title: 'Mean presence time',
      minValue: [0, 0, 0]
    }
  };
  var formatter = new google.visualization.DateFormat({pattern: 'HH:mm:ss'});
  formatter.format(data, 1);
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>