javascript – JQPlot放大图表并使用replot函数

我正在使用jqplot在我的网站上绘制图表.我想通过插入触发链接波纹图来给用户放大图表的可能性.此链接用于显示带有放大图表的弹出窗口.

我发现在div中显示隐藏的图表需要在特定的图上调用replot()函数.

我正在使用的代码示例发布在此处：http://jsfiddle.net/Mithrand1r/JWhmQ/2496/

说实话,我不太确定应该调用plot2.replot()的位置.

任何人都可以帮我解决这个问题吗？

解决方法:

以下是您的问题的答案：JsFiddle Link

$(document).ready(function(){
        $.jqplot.config.enablePlugins = true;
        var chartData = [["19-Jan-2012", 2.61], ["20-Jan-2012", 5.00], ["21-Jan-2012", 6.00]];

        // add a custom tick formatter, so that you don't have to include the entire date renderer library.
        $.jqplot.DateTickFormatter = function(format, val) {
            // for some reason, format isn't being passed through properly, so just going to hard code for purpose of this jsfiddle
            val = (new Date(val)).getTime();
            format = '%b&nbsp%#d'
            return $.jsDate.strftime(val, format);
        };

        function PlotChart(chartData, extraDays, elem) {

            var plot2 = $.jqplot(elem, [chartData], {
                title: 'Mouse Cursor Tracking',
                seriesDefaults: {
                    renderer: $.jqplot.BarRenderer,
                    rendererOptions: {
                        barPadding: 1,
                        barWidth: 50
                    },
                    pointLabels: {
                        show: true
                    }
                },
                axes: {
                    xaxis: {
                        pad: 1,
                        // a factor multiplied by the data range on the axis to give the            
                        renderer: $.jqplot.CategoryAxisRenderer,
                        // renderer to use to draw the axis,     
                        tickOptions: {
                            formatString: '%b %#d',
                            formatter: $.jqplot.DateTickFormatter
                        }
                    },
                    yaxis: {
                        tickOptions: {
                            formatString: '$%.2f'
                        }
                    }
                },
                highlighter: {
                    sizeAdjust: 7.5
                },
                cursor: {
                    show: true
                }
            });
        }

        PlotChart(chartData, 3, "chart1");

        jQuery(function($) {

            $("a.topopup").click(function() {
                    loading(); // loading
                    setTimeout(function(){ // then show popup, deley in .5 second
                        loadPopup(); // function show popup
                    }, 500); // .5 second

            return false;
            });

            /* event for close the popup */
            $("div.close").hover(
                            function() {
                                $('span.ecs_tooltip').show();
                            },
                            function () {
                                $('span.ecs_tooltip').hide();
                            }
                        );

            $("div.close").click(function() {
                disablePopup();  // function close pop up
            });

            $(this).keyup(function(event) {
                if (event.which == 27) { // 27 is 'Ecs' in the keyboard
                    disablePopup();  // function close pop up
                }
            });

                $("div#backgroundPopup").click(function() {
                disablePopup();  // function close pop up
            });

            $('a.livebox').click(function() {
                alert('Hello World!');
            return false;
            });

             /************** start: functions. **************/
            function loading() {
                $("div.loader").show();
            }
            function closeloading() {
                $("div.loader").fadeOut('normal');
            }

            var popupStatus = 0; // set value

            function loadPopup() {
                if(popupStatus == 0) { // if value is 0, show popup
                    closeloading(); // fadeout loading
                    $("#toPopup").fadeIn(0500); // fadein popup div
                    $("#backgroundPopup").css("opacity", "0.7"); // css opacity, supports IE7, IE8
                    $("#backgroundPopup").fadeIn(0001);
                    PlotChart(chartData, 3, "chart2");
                    popupStatus = 1; // and set value to 1
                }
            }

            function disablePopup() {
                if(popupStatus == 1) { // if value is 1, close popup
                    $("#toPopup").fadeOut("normal");
                    $("#backgroundPopup").fadeOut("normal");
                    popupStatus = 0;  // and set value to 0
                    $('#chart2').empty();
                }
            }
            /************** end: functions. **************/
        }); // jQuery End

});

标签：jqplot,javascript,jquery
来源： https://codeday.me/bug/20191008/1875431.html