iframe中jqplot（jquery绘图）不能自动加载，调用resetZoom()方法后才显示。

Posted 2023-05-02

这是iframe：
<iframe id="cf" src="../../FusionCharts/jquery/zoom.jsp" width="340" height="135" scrolling="no" frameborder="0" ></iframe>

这是zoom.jsp:
（引入css、js）
<script type="text/javascript" language="javascript">
$(document).ready(function()
$.jqplot.config.enablePlugins = true;
var goog1 = [['08/10/2011',96.0],['08/11/2011',84.0]];
var goog2= [['08/10/2011',96.0],['08/11/2011',84.0]];
plot = $.jqplot('cfChart', [goog1,goog2],

legend:
show:true,
location: 'sw',
xoffset: 1,
yoffset: 1,
renderer:$.jqplot.EnhancedLegendRenderer
,
series: [
label:'个人', label:'群体'
],
seriesDefaults:
lineWidth: 1.5,
markerOptions:
show:true,
size:4

,
seriesColors:['#cc6666', '#66cc66'],
axes:
xaxis:
renderer:$.jqplot.DateAxisRenderer,
min:'August 1, 2011',
tickInterval: "10 days",
tickOptions:formatString:"%Y/%#m/%#d"
,
yaxis:
show: false,
ticks: [20,40,60,80,100],
tickOptions:formatString:'%d'

,
cursor:zoom:true,
highlighter:show:true
);
);
</script>
<div style="padding-top:0px"><button value="reset" type="button" onclick="plot.resetZoom();">重置</button></div>
<div id="cfChart" style="margin-top:0px; margin-left:0px; width:340px; height:135px;"></div>
哪位大侠知道，或有类似经验，麻烦知道下，谢谢了！！！

重要补充：：：上述内容是在第二选项卡（指数）里面的，页面默认显示第一选项卡（构成），在页面还没有加载完成时直接点击第二选项卡，上面内容顺价加载，但是如果等页面加载完了再点击第二选项卡却是空白，上面的内容却不显示！！！

急急急~~~

问题已解决：上述代码放到了display:none的div里面了，去掉display:none就OK！
又能解释一下的送分了。。。。

jqplot图在非默认Tab页时，需要用plot1.replot();方法重新渲染，可以在切换tab时调用replot();方法，参考：
$('#tabs').bind('tabsshow', function(event, ui)
if (ui.index == 1 && plot1._drawCount == 0)
plot1.replot();

else if (ui.index == 2 && plot2._drawCount == 0)
plot2.replot();

);
可查看examples下面的hiddenPlot.html 参考技术A $(document).ready(function()

// 代码
)
或者:
$(function()
// 代码
)

前端通过jqplot绘制折线图

首先需要下载jqplot需要的js与css文件，我已近打包好了，需要的可以下载

接下来导入其中关键的js与css如下，

<link href="css/jquery.jqplot.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.jqplot.min.js"></script>
<script src="js/jqplot.canvasTextRenderer.js"></script>
<script src="js/jqplot.canvasAxisLabelRenderer.js"></script>

html部分

<div id="chart" style="width:500px;height:300px;" ></div>  这里注意其中的id与之后js的$.jqplot(‘chart‘,data,option)中的第一个参数对应即可

js部分

$(function () {
    var cosPoints = [];
        for (var i=0; i<2*Math.PI; i+=0.4){ 
        cosPoints.push([i, 2.5 + Math.pow(i/4, 2)]); 
    }
    $.jqplot(‘chart‘, [[1,3,4,5,6],[5,6,8,9,12],[3,6,7,8,9],cosPoints], {//$.jqplot(‘chart‘,data,option); target：要显示的位置。data：显示的数据。options：其它配置
    stackSeries: false, // 如果置为true并且有多个分类（如果是折线图，就必须多于一条折线）， 那么每个分类（折线）在纵轴上的值为其前所有分类纵轴值总和与其纵，轴值相加值（eg,当前分类纵轴值为Y3
    title: ‘我的折线图‘, 
    axes: {
        xaxis: {
         label: ‘X轴‘, //指定X轴的说明文字
         pad:0
        },
        yaxis: {
         label: ‘Y轴‘,  
         pad:0
        }
    },
    series:[
                {
                    lineWidth: 3, //指定折线的宽度
                    markerOptions: { style: "dimaond" } //指定折线的样式
                },
                {
                    //showLine: false, //指定是否显示线条
                    markerOptions: { size: 5, style: "circle" } //size设置每个节点的大小
                },
                {
                    markerOptions: { style: "filledSquare" }
                },
                {
                    showMarker:false
                }　　//分别对应4条线
            ],

    grid: {  
        gridLineColor: ‘#978887‘    // 设置整个图标区域网格背景线的颜色  
    }
});
});

其中关键的我在代码中已近说明了，需要代码的小伙伴可以自行下载

链接：http://pan.baidu.com/s/1pKIX41d 密码：2as7