3

我面临一个关于以日期为 X 轴的jqplot的问题。

我的代码是

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。

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

4

2 回答 2

3

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

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

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

于 2012-10-27T08:29:11.447 回答
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
    },
   }
}
于 2014-04-24T11:10:11.473 回答