JQPlot放大图表并使用重绘功能 [英] JQPlot enlarging the chart and using replot function

问题描述

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

I am using jqplot to draw charts on my website. I would like to give user possibility to enlarge charts by inserting Trigger link bellow chart. This link is ment to show popup window with enlarged chart.

我发现在 div 中显示图表隐藏需要在特定情节上调用 replot（）函数。

I have found that showing chart in div which was hidden require to call for replot() function on the specific plot.

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

Sample of code I am working with is posted here: http://jsfiddle.net/Mithrand1r/JWhmQ/2496/

老实说，我不太确定应该调用 plot2.replot（）。

To be honest I am not quite sure where the plot2.replot() should be called.

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

Can anyone help me out with this?

推荐答案

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

Here is the answer to your question: 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放大图表并使用重绘功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！