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

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

vAxis: {
  direction: -1
}

请参阅以下工作代码段...

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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

注意图表在上面的示例中显示的y轴值，
订单看起来不对，以及范围（上午10点到12点）

您似乎只对时间值

感兴趣

因此，建议使用'timeofday'与'datetime'的对比（参见 - ＆gt; working with timeofday）

DataTable 'timeofday'列数据类型采用3或4个数字的数组，分别表示小时，分钟，秒和可选的毫秒。使用timeofday与使用date和datetime不同，因为值不是特定于日期，而date和datetime总是指定日期。

例如，上午8:30的时间是：[8, 30, 0, 0]，第4个值是可选的（[8, 30, 0]将输出相同的'timeofday'值。

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

＆＃13;

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);
}

＆＃13;

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

＆＃13;

Google可视化设置列停靠

1 个答案: