我正在尝试使用jqPlots制作条形图。我用ajax从数据库中获取数据。在垂直方向,它显示价格 - 它们是正确的。但我的问题是如何在xaxis中显示日期。每个栏应根据日期放置在水平的正确位置。例如,我对三个栏的当前日期是:2015-06-06,2015-06-08,2015-06-30。
如果我在xaxis中使用renderer: $.jqplot.CategoryAxisRenderer,
日期显示正确,但条形图的位置不依赖于该日期。
http://prntscr.com/7ew365
如果我使用renderer:$.jqplot.DateAxisRenderer
,它会以这种方式看待:
http://prntscr.com/7ew1ot
日期不会显示。他们应该是:
var ticks2 = ['2015-05-31', '2015-06-06', '2015-06-13', '2015-06-20','2015-06-27','2015-07-03'];
但是当我把:ticks:ticks2,我的酒吧消失了。
我的观点是:
$(document).ready(function(){
var ticks2 = ['2015-05-31', '2015-06-06', '2015-06-13', '2015-06-20','2015-06-27','2015-07-03'];
var ticks = ['0.02', '0.04', '0.06', '0.08','0.1','0.12'];
$.ajax({
url: "<?= base_url() ?>index.php/receivedOrders/get_prices",
dataType:"json",
}).success(function(responseText) {
console.log(responseText)
$.jqplot.config.enablePlugins = true;
var plot2 = $.jqplot('column_chart', responseText, {
seriesDefaults:{
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barPadding: 1,
barMargin: 15,
barDirection: 'vertical',
barWidth: 50
},
pointLabels: { show: true }
},
axes: {
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
// ticks: ticks2,
tickOptions: {
formatString:' %Y-%m-%d %H:%M'
//, min:'2015-06-06', max:'2015-06-30', tickInterval:'7 days'
},
},
yaxis: {
ticks: ticks,
tickOptions: {
formatString: '%.2f'
},
}
},
highlighter: {
sizeAdjust: 7.5
},
cursor: {
show: true
}
});
}
);
});