标签：jqplot javascript jquery

我正在使用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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。