javascript - jqPlot中的tickInterval问题

Question

我是 jqplot 的新手，但正在一个非常重要的项目中使用它。我试图让 x 轴每天都有一个“滴答”——截至目前，有多个。这是一个屏幕截图：

这是代码（我还添加了一个最小值和最大值，因为这篇文章提到了）：

 $(document).ready(function(){

                            var ajaxDataRenderer = function(url, plot, options) {
                                var ret = null;
                                $.ajax({
                                    async: false,
                                    url: url,
                                    type: "GET",
                                    dataType:"json",
                                    data: {metricName: ""},
                                    success: function(data) {
                                        ret = data;
                                    },
                                    error:function (xhr, ajaxOptions, thrownError){
                                        alert(xhr.responseText);
                                    }    
                                });
                                return ret;
                            };

                            //var jsonurl = "reports/reportData.json";
                            var jsonurl = "tenant/metrics/get.json";

                            var today = new Date();

                            var plot2 = $.jqplot('chart2', jsonurl,{
                                title: "",
                                dataRenderer: ajaxDataRenderer,
                                dataRendererOptions: {unusedOptionalUrl: jsonurl},
                                axes: {
                                    xaxis: {
                                        'numberTicks' : 7,
                                        min: '2012-10-05',
                                        max: today,
                                        renderer:$.jqplot.DateAxisRenderer,
                                        rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer},
                                        tickInterval: '1 day',
                                        tickOptions:{formatString:'%Y-%#m-%#d'

                                        }
                                        //rendererOptions: {sdaTickInterval: [1, 'month']}

                                    },
                                    yaxis: {
                                        label: "MB",
                                        tickOptions:{formatString:'%d '},
                                        // Comment the next line out to allow negative values (and therefore rounded ones)
                                        min: 0
                                    }
                                }   
                            });
                        });

即使我像这样手动设置点击：

 $(document).ready(function(){

                            var ajaxDataRenderer = function(url, plot, options) {
                                var ret = null;
                                $.ajax({
                                    async: false,
                                    url: url,
                                    type: "GET",
                                    dataType:"json",
                                    data: {metricName: ""},
                                    success: function(data) {
                                        ret = data;
                                    },
                                    error:function (xhr, ajaxOptions, thrownError){
                                        alert(xhr.responseText);
                                    }    
                                });
                                return ret;
                            };

                            //var jsonurl = "reports/reportData.json";
                            var jsonurl = "tenant/metrics/get.json";

                            var today = new Date();

                            var plot2 = $.jqplot('chart2', jsonurl,{
                                title: "",
                                dataRenderer: ajaxDataRenderer,
                                dataRendererOptions: {unusedOptionalUrl: jsonurl},
                                axes: {
                                    xaxis: {
                                        'numberTicks' : 7,
                                        min: '2012-10-05',
                                        max: today,
                                        renderer:$.jqplot.DateAxisRenderer,
                                        rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer},
                                        ticks: ['2012-10-05','2012-10-06','2012-10-07','2012-10-08', today],
                                        tickOptions:{formatString:'%Y-%#m-%#d'

                                        }
                                        //rendererOptions: {sdaTickInterval: [1, 'month']}

                                    },
                                    yaxis: {
                                        label: "MB",
                                        tickOptions:{formatString:'%d '},
                                        // Comment the next line out to allow negative values (and therefore rounded ones)
                                        min: 0
                                    }
                                }   
                            });
                        });

标记与其正确日期不匹配。这是一个屏幕截图：

有没有理智的方法可以做到这一点？我希望每个 x 轴刻度只有一个日期，并且数据输入标记位于该刻度的轴上。

这真让我抓狂！请帮忙！

另外，这是我的 json

[[["2012-10-05 10:57:16AM", 0],["2012-10-05 11:02:14AM", 2449],["2012-10-08 08:17:47AM", 9639],["2012-10-08 08:17:53AM", 224768],["2012-10-09 07:43:19AM", 9640],["2012-10-09 07:44:01AM", 224769]]]

Answer 1

您的格式字符串不正确，因为它不包含时间戳；尝试将其更改为以下内容：

tickOptions:{formatString:'%y-%#m-%#d%n%#I:%#M:%#S%p}

或者，如果您不需要时间戳，请保持格式字符串不变并从 JSON 中删除时间戳。

编辑

如果上述格式字符串不起作用，请尝试使用以下值操作值以匹配：

// Year
%Y  2008
%y  08

// Month
%m  09
%#m  9
%B  September
%b  Sep

// Day
%d  05
%#d  5
%e  5
%A  Sunday
%a  Sun
%w  0, 0 = Sunday, 6 = Saturday
%o  th, The ordinal suffix string following the day of the month

// Hour
%H  23
%#H  3
%I   11
%#I  3
%p  PM, AM or PM

// Minute
%M  09
%#M  9

// Second
%S  02
%#S  2
%s  1206567625723, Unix timestamp, seconds past 1970-01-01 00:00:00

// Millisecond
%N  008
%#N  8

我希望这有帮助！