Jqplot 日期渲染器填充问题答案

【问题标题】：Jqplot Date renderer padding issueJqplot 日期渲染器填充问题
【发布时间】：2012-10-26 14:05:46
【问题描述】：

我遇到了一个关于 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 日开始。

我知道替代方法是使用最小值和最大值。

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

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。

从开始日期总是有一个刻度。如果有人能指出我的错误，那将非常有帮助。谢谢。

【问题讨论】：

标签： jquery jqplot

【解决方案1】：

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

这是一个使用 pad 但没有 "$.jqplot.DateAxisRenderer" 的小提琴：http://jsfiddle.net/33jEG/4/

最好的办法是使用min / max选项，对不起

【讨论】：

最小值在使用$.jqplot.DateAxisRenderer 的情况下绝对有效。在我的例子中，我有多个系列，这是我添加的以消除左侧min: dataObj.array[0][0][0] 的空间。在 OP 的情况下，它将是 min: data[0][0] 在 xaxis

【解决方案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
    },
   }
}

【讨论】：