javascript - 谷歌可视化设置栏停靠

Question

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

我在 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);

Answer 1

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

The direction in which the values along the vertical axis grow. Specify -1 to reverse the order of the values.

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 )

The DataTable 'timeofday' column data type takes an array of either 3 or 4 numbers, representing hours, minutes, seconds, and optionally milliseconds, respectively. Using timeofday is different than using date and datetime in that the values are not specific to a date, whereas date and datetime always specify a date.

For example, the time 8:30am would be: [8, 30, 0, 0], with the 4th value being optional ([8, 30, 0] would output the same 'timeofday' value).

请参阅以下工作片段，例如使用'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>