谷歌可視化設置列碼頭

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>