Question

我遇到的问题是jqplot，其中日期是X轴。

我的代码是

var data = [
    ["10/23/2011", 266522], 
    ["10/24/2011", 170287], 
    ["10/25/2011", 2175], 
    ["10/26/2011", 1794]
];

$.jqplot('chart1', [data], {

    axes: {
        xaxis: {
            renderer: $.jqplot.DateAxisRenderer,
        }
    }
});

我的日期范围从2011年10月23日开始。

但是，呈现的图表始终从2011年10月22日开始。

我知道替代方法是使用min和max。

但我也希望刻度间隔均匀分布。以下是我尝试通过均匀地间隔图表中的日期标签来实现的目的。

var chart = $('chart1');
chart.resetAxesScale();
var tickInterval = Math.ceil(chart._plotData[0].length / chart.axes.xaxis._numberTicks);
    var newTickInterval = tickInterval * 24 * 60 * 60 * 1000;
    chart.axes.xaxis.tickInterval = newTickInterval;
chart.replot();

这基本上会使tickIntervals均匀，x轴也不会乱。

我甚至尝试使用最小值和最大值设置图表，并使用上面的代码均匀地分隔日期，但我没有运气。最小值和最大值将重置为“chart.resetAxesScale()”。即使我在resetAxesScale方法中选择使用现有的min，max，图表也不会遵循这些值。轴选项中的“pad”属性不适用于DateTimeAxisRenderer。

始终从开始日期开始有一个勾号。如果有人可以指出我的错误，那将会非常有用。感谢。

Answer 1

我尝试使用“pad”，“padMin”和“PadMax”选项，但似乎“$.jqplot.DateAxisRenderer”插件似乎不允许使用这些选项。

以下是使用pad但没有“$.jqplot.DateAxisRenderer”的小提琴：http://jsfiddle.net/33jEG/4/

最好的方法是使用min / max选项，抱歉

Answer 2

我在日期轴上遇到类似的填充问题，所以最后使用min max设置范围并使用momentjs库调整范围来解析日期。希望它有所帮助。

var padding = 0.05;
var min = moment(data[0][0]);
var max = moment(data[data.length - 1][0]);
var pad = (max.valueOf() - min.valueOf()) * padding;
min = moment.unix((min.valueOf() - pad)/1000);
max = moment.unix((max.valueOf() + pad)/1000);

<...>

axes: {
  xaxis: {
    min: min.format("YYYY-MM-DD HH:mm:ss"),
    max: max.format("YYYY-MM-DD HH:mm:ss"),
    renderer: $.jqplot.DateAxisRenderer,
    rendererOptions: {
       tickRenderer: $.jqplot.CanvasAxisTickRenderer
    },
   }
}

Jqplot日期渲染器填充问题

2 个答案: