DateAxisRenderer действительно предназначен для линейных графиков, а не для гистограмм.Когда вы комбинируете это с гистограммами, это просто не работает правильно.Идея / цель DateAxisRenderer состоит в том, чтобы построить линейный / точный график времени по дате / времени.Таким образом, если вы пропустите запись даты, она все равно будет отображаться в масштабе с течением времени.Проверьте их примеры в DateAxisRenderer здесь: http://www.jqplot.com/tests/date-axes.php
То, что вы хотите использовать, это CategoryAxisRenderer.Затем вы можете просто переопределить / создать свой собственный рендерер меток и быть готовым к работе.Обычно вы не хотите добавлять дополнительные пустые элементы к элементу, особенно если они пустые, однако, если вы это сделаете, просто добавьте их в свой массив данных.
Вот jsfiddle, который делает то, что вы хотите:http://jsfiddle.net/fordlover49/JWhmQ/
Обратите внимание, что вы можете заглянуть в раздел управления ресурсами, чтобы проверить, какие файлы вам нужны (помимо файла jquery).
Вот javascript в случае jsfiddleдействует вверх:
$.jqplot.config.enablePlugins = true;
var chartData = [["19-Jan-2012", 2.61], ["20-Jan-2012", 5.00], ["21-Jan-2012", 6.00]];
// add a custom tick formatter, so that you don't have to include the entire date renderer library.
$.jqplot.DateTickFormatter = function(format, val) {
// for some reason, format isn't being passed through properly, so just going to hard code for purpose of this jsfiddle
val = (new Date(val)).getTime();
format = '%b %#d'
return $.jsDate.strftime(val, format);
};
function PlotChart(chartData, extraDays) {
// if you want extra days, just append them to your chartData array.
if (typeof extraDays === "number") {
for (var i = 0; i < extraDays; i++) {
var actualDate = new Date(chartData[chartData.length - 1]); // convert last entry to actual date
var newDate = new Date(actualDate.getFullYear(), actualDate.getMonth(), actualDate.getDate() + 1); // create new increased date
chartData.push([newDate, 0]);
}
}
var plot2 = $.jqplot('chart1', [chartData], {
title: 'Mouse Cursor Tracking',
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barPadding: 1,
barWidth: 50
},
pointLabels: {
show: true
}
},
axes: {
xaxis: {
pad: 1,
// a factor multiplied by the data range on the axis to give the
renderer: $.jqplot.CategoryAxisRenderer,
// renderer to use to draw the axis,
tickOptions: {
formatString: '%b %#d',
formatter: $.jqplot.DateTickFormatter
}
},
yaxis: {
tickOptions: {
formatString: '$%.2f'
}
}
},
highlighter: {
sizeAdjust: 7.5
},
cursor: {
show: true
}
});
}
PlotChart(chartData, 3);