Question

我正在尝试将jquery datepicker与jqplot插件结合起来。基本上，我正在使用默认值进行绘图加载，然后当按下按钮时，我正在尝试使用新的最大值和分钟重绘该绘图。

我一直在阅读the documentation，我似乎无法找到问题的明确答案。这是我的代码：

 $(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 currentTime = new Date()
                            var month = currentTime.getMonth() + 1;
                            var day = currentTime.getDate();
                            var year = currentTime.getFullYear();
                            var today = month + "-" + day + "-" + year;

                            var currentDatePlus = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
                            var dayPlus = currentDatePlus.getDate()
                            var monthPlus = currentDatePlus.getMonth() + 1
                            var yearPlus = currentDatePlus.getFullYear()
                            var tomorrow = monthPlus + "/" + dayPlus + "/" + yearPlus;


                            function getLastWeek(){
                                var today = new Date();
                                var lastWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7);
                                return lastWeek ;
                            }

                            var lastWeek = getLastWeek();
                            var lastWeekMonth = lastWeek.getMonth() + 1;
                            var lastWeekDay = lastWeek.getDate();
                            var lastWeekYear = lastWeek.getFullYear();

                            var lastWeekDisplay = lastWeekMonth + "/" + lastWeekDay + "/" + lastWeekYear;

                            var datepickerBegin = $("#datepicker_start").val();
                            var datepickerEnd = $("#datepicker_to").val();

                            $('#applyBtn').click( function() {
                                // Check to make sure the datepicker isn't empty
                            if ($("#datepicker_start").val() !== "" && $("#datepicker_to").val() !== "") {

                                var datepickerBegin = $("#datepicker_start").val();
                                var datepickerEnd = $("#datepicker_to").val();
                                alert(datepickerBegin);
                                alert(datepickerEnd);
                                //redraw the plot now.
                                plot2.reInitialize({});
                                plot2.redraw({});
                                //
                                alert('hasd')

                                }
                            })

                                if (datepickerBegin == "") {
                                    var startingDate = lastWeekDisplay;
                                } else {
                                    var startingDate = datepickerBegin;
                                }

                                if (datepickerEnd == "") {
                                    var endingDate = tomorrow;
                                } else {
                                    var endingDate = datepickerEnd;
                                }

                            //



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

                                        }
                                        //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
                                    }

                                },
                                highlighter: {
                                    show: true,
                                    sizeAdjust: 7.5
                                }
                            });


                        });

那里的任何人都可以帮助我吗？我可能只是在逻辑上有一个根本的缺陷。请帮忙！

Answer 1

好的，所以答案，无论多么丑陋，只是在点击事件上完全重新创建情节。这就是代码的外观：

 $('#applyBtn').click( function() {
                                // Check to make sure the datepicker isn't empty
                            if ($("#datepicker_start").val() !== "" && $("#datepicker_to").val() !== "") {

                                var datepickerBegin = $("#datepicker_start").val();
                                var datepickerEnd = $("#datepicker_to").val();

                                        //Recreate the plot
                                        var plot2 = $.jqplot('chart2', jsonurl,{
                                        title: "",
                                        dataRenderer: ajaxDataRenderer,
                                        dataRendererOptions: {unusedOptionalUrl: jsonurl},
                                        axes: {
                                            xaxis: {
                                                //'numberTicks' : 7,
                                                min: datepickerBegin,
                                                max: datepickerEnd,
                                                renderer:$.jqplot.DateAxisRenderer,
                                                rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer},
                                                tickInterval: '1 day',
                                                tickOptions:{formatString:'%#m/%#d/%Y'

                                                }
                                                //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
                                            }

                                        },
                                        highlighter: {
                                            show: true,
                                            sizeAdjust: 7.5
                                        }
                                    });
                                //redraw the plot now.
                                //plot2.reInitialize({});
                                plot2.replot({});

                                }
                            })

我无法获得任何工作答案 - 但是，如果有人有意见或解决方案，请告诉我们！

仅重绘max和min - jqPlot

1 个答案: