谷歌可视化设置列码头

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 
} 

看到下面的工作片段...

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）

数据表'timeofday'列的数据类型需要3个或4个数字的阵列，representi小时，分钟，秒和可选的毫秒。使用timeofday与使用日期和日期时间不同，因为值不是特定于日期，而日期和日期时间始终指定日期。

例如，时间上午8:30将是：[8, 30, 0, 0]，与第四值是可选的（[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>