Question

我是jqplot的新手，但我正在一个非常重要的项目中使用它。我试图让x轴有一个＆＃39; tick＆＃39;每一天 - 截至目前，有多个。这是一个截图：

enter image description here

以下是代码（我还在其中添加了最小值和最大值为this post referred）：

 $(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
                                    }
                                }   
                            });
                        });

标记与其正确日期不符。这是一个截图： enter image description here

有理智的方法吗？我希望每个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

我希望这有帮助！

jqPlot中tickInterval的问题

1 个答案: