Javascript 谷歌可视化设置列坞
我正在与谷歌图表作斗争。我希望条形图从底部显示,而不是从顶部显示。目前它们正在“悬挂”,如下图所示: 我没有看到正确的设置,如果有,请纠正我。这是负责处理显示的代码:Javascript 谷歌可视化设置列坞,javascript,jquery,charts,google-visualization,Javascript,Jquery,Charts,Google Visualization,我正在与谷歌图表作斗争。我希望条形图从底部显示,而不是从顶部显示。目前它们正在“悬挂”,如下图所示: 我没有看到正确的设置,如果有,请纠正我。这是负责处理显示的代码: function parseInterval(value) { var result = new Date(1,1,1); result.setMilliseconds(value*1000); return result; } (function($) { $(document).ready(
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);
函数解析间隔(值){
var结果=新日期(1,1,1);
结果。设置毫秒(值*1000);
返回结果;
}
(函数($){
$(文档).ready(函数(){
变量加载=$(“#加载”);
$.getJSON(“/api/v1/users”),函数(结果){
var下拉列表=$(“#用户id”);
$。每个(结果、功能(项目){
dropdown.append($(“”).val(this.user_id).text(this.name));
});
dropdown.show();
loading.hide();
});
$('#user_id')。更改(函数(){
var selected_user=$(“#user_id”).val();
var chart_div=$(“#chart_div”);
如果(所选用户){
loading.show();
图表分区隐藏();
$.getJSON(“/api/v1/mean\u time\u month/”+所选用户,函数(结果){
$.each(结果、函数(索引、值){
值[1]=解析间隔(值[1]);
});
var data=new google.visualization.DataTable();
data.addColumn('string','Month');
data.addColumn('datetime','Mean time(h:m:s));
data.addRows(结果);
变量选项={
哈克斯:{
标题:“月”
},
言辞:{
标题:“平均在场时间”,
minValue:新日期(1,1,1,0,0)
},
};
var formatter=new google.visualization.DateFormat({pattern:'HH:mm:ss'});
格式化程序。格式化(数据,1);
图表分区显示();
loading.hide();
var chart=new google.visualization.ColumnChart(chart_div[0]);
图表绘制(数据、选项);
});
}
});
});
})(jQuery);
尝试使用选项vAxis.direction
值沿垂直轴增长的方向。指定-1以反转值的顺序
请参阅以下工作片段
google.charts.load('current'{
回调:图纸,
软件包:['corechart']
});
函数绘图图(){
var data=new google.visualization.DataTable();
data.addColumn('string','Month');
data.addColumn('datetime','Mean time(h:m:s));
data.addRows([
['Jan',新日期(1,1,1,8,16,13)],
['Feb',新日期(1,1,1,9,24,45)],
['Mar',新日期(1,1,1,7,36,56)],
['Apr',新日期(1,1,1,4,20,42)],
['May',新日期(1,1,1,6,51,16)]
]);
变量选项={
哈克斯:{
标题:“月”
},
言辞:{
方向:-1,
标题:“平均在场时间”,
minValue:新日期(1,1,1,0,0)
}
};
var formatter=new google.visualization.DateFormat({pattern:'HH:mm:ss'});
格式化程序。格式化(数据,1);
var chart=new google.visualization.ColumnChart(document.getElementById('chart_div'));
图表绘制(数据、选项);
}
的确如此。如果没有经验的后端开发人员得到前端任务和一些过时的代码来参考,就会发生这种情况:)我给出+1来建议更好的解决方法。
vAxis: {
direction: -1
}