JQPlot放大图表并使用重绘function

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

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

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

说实话，我不太确定应该调用plot2.replot() 。

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

Answer 1

以下是您的问题的答案： 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 });