俩个问题1.用js画图的时候把横坐标换成时间的话,报错,每次都不一样,改怎么弄啊
2.用火狐可以出来,用ie不出结果,主要是Ajax老是失败,但ff可以成功,

解决方案 »

  1.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery.flot.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="js/excanvas.js"></script>
    <style type="text/css"> 
    body{margin:0px auto;font-size:12px;}
    .topnav{height:29px;background:#284C93;width:100%;
    padding: 5px 10px; }
    /*顶部导航*/
    .topnav p span
    {
    background-color:#284C93;
    border: 1px solid #CCCCCC; 
    cursor: pointer; 
    color:white;
    width:104px;
    height:27px;
    display:block;
    float:left;
    line-height:27px;
    text-align:center;
    margin-right:4px;
    margin-bottom:0px;
    margin-top:-12px !important;
    margin-top:4px;
    border:1px solid #00236F;
    }
    .topnav p span a
    {
    height:27px;
    line-height:27px;
    display:block;
    width:100%;
    color:white;
    text-decoration:none;
    font-size:12px;
    border:1px solid #4D6FAE;
    letter-spacing:6px;}
    .topnav p span a.one{
    background:url(img/home.png) no-repeat 12px 2px;}
    .topnav p span a.two{
    background:url(img/shijian.png) no-repeat 12px 2px;}
    .topnav p span.current { 
    background:url(img/tab_select_bg.jpg) center;
    color:#053FC3;
    font-weight:bold;} 
    .topnav p span.current a{
    color:#053FC3;
    font-weight:bold;}
    /*内容块*/
    .content{}
    .contentbox_title{
    background:url(img/tab_select_bg.jpg) center;
    height:20px;
    display:block;
    border-bottom:1px solid #A0BED6;
    color:#294D95;
    font-weight:bold;
    line-height:20px;
    padding-left:14px;}
    .contentbox{
    background:#F6FAFF;
    border:1px solid #A0BED6;}
    .jiaoyilian{
    /*width:400px;;
    height:250px;
    float:left;
    margin:12px;*/}
    .shiyonglv{
    /*width:100%;
    height:250px;
    margin:12px;float:right;*/}
    .tongji{
    margin:12px;
    display:block;
    height:250px;}
    /*第二个切换块*/
    .tabtwo{}
    dd{margin:0px;padding:0px;display:block;float:left;border:1px solid #CCCCCC;margin-right:4px;height:18px;width:80px;text-align:center;}
    .selected{background:white;cursor:hand;}
    </style> 
    <script type="text/javascript"> 
      var arr = new  Array();var arrDates = new  Array();
    $(document).ready(function() { 
    $(".topnav span:first").addClass("current"); //为第一个SPAN添加当前效果样式 
    $(".topnav span").mouseover(function() { 
    $(".topnav span").removeClass("current"); //去掉所有SPAN的样式 
    $(this).addClass("current"); 
    }); 
    //第二个tab切换
    $(".tabtwo dd:first").addClass("selected"); //为第一个SPAN添加当前效果样式 
    $(".tongji ul:not(:first)").hide(); //隐藏其它的UL 
    $(".tabtwo dd").mouseover(function() { 
    $(".tabtwo dd").removeClass("selected"); //去掉所有SPAN的样式 
    $(this).addClass("selected"); 
    $(".tongji ul").hide(); 
    $("." + $(this).attr("id")).fadeIn('slow');   }); 
    $(".jiaoyilian").css({width:"650px",height:"350px",float:"left",margin:"12px 12px 12px 6px"});
    $(".shiyonglv").css({height:"250px",flat:"right",margin:"12px"});}); 
    function GetNowTime()//JS取时间
    {  var dateNow=new Date();
       var daystoadd= -1;
       var newtime=dateNow.getTime()+(daystoadd*24*60*60*1000);
       var arrDate =new Array();
       for(var i=0;i<24*60/5;i++){
           {var newtimems=0;
         newtimems=newtime+(i*5*60*1000);
         arrDate[i] = new Date( newtimems );}}
       return arrDate;}
    $(function(){$.ajax({type : "POST",url : "information.xml",dataType : "xml",
    success : function(xml) {
         arr=GetNowTime();
    alert(arr[0]);
    $(xml).find("computer").each(function() {
    var computer = $(this);
    var host = computer.find("host").text(); 
    var cpuUtilityRate = computer.find("cpuUtilityRate").text(); 
    var MemoryUtilityRate = computer.find("MemoryUtilityRate").text(); 
    var Condition = computer.find("Condition").text(); 
    //alert(host);alert(cpuUtilityRate);alert(MemoryUtilityRate);alert(Condition);
        var str= "<tr><td>"+host+"</td><td>"+cpuUtilityRate+"</td><td>"+MemoryUtilityRate+"</td><td>"+Condition+"</td>"
    $("#tbody1").append(str);
    arrDates.push(computer );   })   },
    error : function(xml) {
    alert("error loading xml");  }    });    })
    $(function () {
        var sin = [], cos = [];
        for (var i = 0; i < 24*60/10; i ++) {
            sin.push([arrDates[i], Math.sin(i)*100]);
            cos.push([arrDates[i], (Math.cos(i))*100]);
        }
        var plot = $.plot($("#chart"),
               [ { data: sin, label: "sin(x)"}, { data: cos, label: "cos(x)" } ],
               { lines: { show: true },
                 selection: { mode: "xy" },
                 grid: { hoverable: true, clickable: true },
                 yaxis: { min:0, max: 100 }  });
        function showTooltip(x, y, contents) { 
            $('<div id="tooltip">' + contents + '</div>').css( {
                position: 'absolute',
                display: 'none',
                top: y + 5,
                left: x + 5,
                border: '1px solid #fdd',
                padding: '2px',
                'background-color': '#fee',
                opacity: 0.80
            }).appendTo("body").fadeIn(200);   }
        var previousPoint = null;
        $("#chart").bind("plothover", function (event, pos, item) {
            $("#x").text(pos.x.toFixed(2));
            $("#y").text(pos.y.toFixed(2));       // if ($("#enableTooltip:checked").length > 0) {
                if (item) {
                    if (previousPoint != item.datapoint) {
                        previousPoint = item.datapoint;            
                        $("#tooltip").remove();
                        var x = item.datapoint[0].toFixed(2),
                            y = item.datapoint[1].toFixed(2);   
                        showTooltip(item.pageX, item.pageY,
                                    item.series.label + " of " + x + " , " + y);} }
                else {$("#tooltip").remove();
                    previousPoint = null;            } });
        $("#chart").bind("plotclick", function (event, pos, item) {
            if (item) {
               // $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
                plot.highlight(item.series, item.datapoint);  }   });   });
    </script> 
    </head>
    <body>
    <div class="topnav">
    <p> 
    <span ><a href="#" class="one">&nbsp;首页</a></span> <span ><a href="#" class="two">事件</a></span> </p> 
    </div>
    <div class="content">
    <div class="contentbox jiaoyilian" >
    <div class="contentbox_title">交易量</div>
    <div id="chart" style="width:550px;height:260px;">
            </div>
    </div>
    <div class="contentbox shiyonglv">
    <div class="contentbox_title">使用率</div>
    <div>
         <table  width="100%">
               <thead>
             <tr class="contentbox_title" >
             <th>主机</th><th>CPU使用率</th><th>内存使用率</th><th>状态</th>
         </tr>
     </thead>
              <tbody id="tbody1">
      </tbody>
        </table>
    </div>
    </div>
    <div class="tabtwo">
    <div class="contentbox tongji ">
    <div class="contentbox_title">
    <dd id="tab1">交易量统计</dd>
    <dd id="tab2">交易错误统计</dd>
    </div>
    <ul class="tab1"> 
    <li><a href="http://www.poluoluo.com" target="_blank">交易量统计a</a></li><li><a href="http://www.poluoluo.com" target="_blank">交易量统计b</a></li><li><a href="/jzxy/wytx/code/index.html" target="_blank">交易量统计c</a></li></ul> 
    <ul class="tab2"> 
    <li><a href="/jzxy/wytx/menu/Index.html" target="_blank">交易错误统计1</a></li><li><a href="/jzxy/wytx/jscode/index.html" target="_blank">交易错误统计2</a></li></ul> 
    </div>
    </div>
    </div>
    </body>
    </html>
    information.xml
    <?xml version="1.0" encoding="UTF-8"?>
    <information>
        <computer ID="1">
         <host>192.168.1.0</host>
         <cpuUtilityRate>80%</cpuUtilityRate>
         <MemoryUtilityRate>70%</MemoryUtilityRate>
         <Condition>重要告警</Condition>
        </computer>
        <computer ID="2">
         <host>192.168.1.2</host>
         <cpuUtilityRate>60%</cpuUtilityRate>
         <MemoryUtilityRate>60%</MemoryUtilityRate>
         <Condition>警告告警</Condition>
        </computer>
    <computer ID="3">
         <host>192.168.1.2</host>
         <cpuUtilityRate>60%</cpuUtilityRate>
         <MemoryUtilityRate>60%</MemoryUtilityRate>
         <Condition>警告告警</Condition>
        </computer>
    </information>
      

  2.   

    第二个问题是不是error loading xml啊
      

  3.   

    有俩个包有点大,发给不下,有高手愿意解决的话我可以把包发给你们  .我QQ309413458邮箱rxw3109152163.com
      

  4.   

    你是指flot和excanvas吗  不用了~~我只是想知道你问题出在哪里~~~
      

  5.   

    ajax那块你的问题在于没有对汉字CDATA
      

  6.   

    问题2用ie和遨游error loading xml,
    问题1:画图横坐标
    sin.push([arrDates[i], Math.sin(i)*100]);
      cos.push([arrDates[i], (Math.cos(i))*100]);如果把横坐标arrDates[i]改为i的话可以正常出图,可换成日期数组的话报错
       1.An invalid or illegal string was specified"  code: "12
    http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js
    Line 101
       2。An invalid or illegal string was specified" code: "12
    [Break on this error] ctx.lineTo(drawx, drawy);
      

  7.   

    用这个替换你自己的这部分,ajax问题就全部解决了
    $(function(){
    $.ajax({type : "POST",
    url : "information.xml",
    dataType:($.browser.msie) ? "text" : "xml",
    success : function(xml) {
    if( typeof xml == "string" ){
    var oxml = new ActiveXObject("Microsoft.XMLDOM");
    oxml.async = false;
    oxml.loadXML(xml);
    xml = oxml;

    arr=GetNowTime();
    alert($(xml).find("computer").length);
    $(xml).find("computer").each(function() {
    var computer = $(this);
    var host = computer.find("host").text();  
    var cpuUtilityRate = computer.find("cpuUtilityRate").text();  
    var MemoryUtilityRate = computer.find("MemoryUtilityRate").text();  
    var Condition = computer.find("Condition").text();  
    var str= "<tr><td>"+host+"</td><td>"+cpuUtilityRate+"</td><td>"+MemoryUtilityRate+"</td><td>"+Condition+"</td>"
    $("#tbody1").append(str);
    arrDates.push(computer );  
    }) 
    },
    error : function(xml) {
    alert(xml.responseText);
    //alert("error loading xml"); 

    }); 
    })
      

  8.   

    补充第一个问题状况:运行的时候Ajax好像读了俩次,就下面那个函数,应为在tbody1里面是显示的重复数据(俩次),
    $(function(){$.ajax({type : "POST",url : "information.xml",dataType : "xml",
    success : function(xml) {
    arr=GetNowTime();
    alert(arr[0]);
    $(xml).find("computer").each(function() {
    var computer = $(this);
    var host = computer.find("host").text();  
    var cpuUtilityRate = computer.find("cpuUtilityRate").text();  
    var MemoryUtilityRate = computer.find("MemoryUtilityRate").text();  
    var Condition = computer.find("Condition").text();  
    //alert(host);alert(cpuUtilityRate);alert(MemoryUtilityRate);alert(Condition);
    var str= "<tr><td>"+host+"</td><td>"+cpuUtilityRate+"</td><td>"+MemoryUtilityRate+"</td><td>"+Condition+"</td>"
    $("#tbody1").append(str);
    arrDates.push(computer );  }) },
    error : function(xml) {
    alert("error loading xml"); } }); })我的html文档里还有的一个函数,我觉的和错误没啥关系就没写,(主要是字数超标)等解决后,每天 增加的分全部奖励!!!!(实在是没分了,希望各路高手帮帮忙!!)
    $(function(){
      alert('two');
    $.ajax({
      type: "GET",
      url: "js/test.js",
      dataType: "script"
    }); 
    })
    test.jssetInterval(
    function(){$.ajax({
      type : "POST",
      url : "information.xml",
      dataType : "xml",
      success : function(xml) {
      alert('success');
      },
      error : function(xml) {
      alert("error load xml");
      }
      });
      }
      ,50000000)
     
      

  9.   

    用js画图的时候把横坐标换成时间的话,报错,每次都不一样,改怎么弄啊这个问题更离谱,arrDates是什么你自己看下
    如果是时间的话 起码也应该是arr吧~~
      

  10.   

    同时我觉得 如果可以的话 你把三个.ready函数包到一起来,因为你的程序有顺序关系~~~
      

  11.   

    很成功,希望cj205大哥能给解决问题1,分不是问题,(需要的话我完结几天积累点分),麻烦你了,小弟实在是搞不定,http://code.google.com/p/flot/我是从这下的插件,一定要帮帮小弟啊
      

  12.   

    arr是放的是Ajax读去的数据的数组呀,arrDates是放的时间数组,下面这个函数生成的时间,但是我生成时间数组是放在Ajax成功之后执行的。
    function GetNowTime()//JS取时间
    { var dateNow=new Date();
      var daystoadd= -1;
      var newtime=dateNow.getTime()+(daystoadd*24*60*60*1000);
      var arrDate =new Array();
      for(var i=0;i<24*60/5;i++){
      {var newtimems=0;
    newtimems=newtime+(i*5*60*1000);
    arrDate[i] = new Date( newtimems );}}
      return arrDate;}
      
      

  13.   

    arr=GetNowTime();
    $(xml).find("computer").each(function() {
    var computer = $(this);
    var host = computer.find("host").text();  
    var cpuUtilityRate = computer.find("cpuUtilityRate").text();  
    var MemoryUtilityRate = computer.find("MemoryUtilityRate").text();  
    var Condition = computer.find("Condition").text();  
    var str= "<tr><td>"+host+"</td><td>"+cpuUtilityRate+"</td><td>"+MemoryUtilityRate+"</td><td>"+Condition+"</td>"
    $("#tbody1").append(str);
    arrDates.push(computer);  
    }) 这是你的代码,看到什么了吗
    arrDates.push的是什么?不是时间吧
    arr=GetNowTime();获取了时间没有问题,而且也是个数组。
      

  14.   

       $(function(){
            $.ajax({type : "POST",
                    url : "information.xml",
                    dataType:($.browser.msie) ? "text" : "xml",
                    success : function(xml) {
                                                if( typeof xml == "string" ){
                                                    var oxml = new ActiveXObject("Microsoft.XMLDOM");
                                                    oxml.async = false;
                                                    oxml.loadXML(xml);
                                                    xml = oxml;
                                                }                                     
                                                arr=GetNowTime();把这句改为arrDates=GetNowTime();可以出图,但横坐标显示不是时间,我需要把arrDates怎么转一下,还是别的问题
      

  15.   

    剩下的问题我解决不了了~我对flot没有了解。你看下文档吧明显可以看出他把你的time改成了float
      

  16.   

    横坐标是显示1287310000000,1287320000000,1287330000000,1287340000000,1287350000000这五个点
    这是去时间函数function GetNowTime()//JS取时间
    {  var dateNow=new Date();
       var daystoadd= -1;
       var newtime=dateNow.getTime()+(daystoadd*24*60*60*1000);
       var arrDate =new Array();
       for(var i=0;i<24*60/5;i++){
           var newtimems=0;
       newtimems=newtime+(i*5*60*1000);
       arrDate[i] = new Date( newtimems );
     }
     alert(arrDate[0]);
       return arrDate;
    }刚刚那个在for里面多写了一个{}
      

  17.   

       1我用这个当横坐标var arrayString=["q","qw","we","ws","er","qefcsdvdasv"];不出图。横坐标显示是
        2用这个当横坐标var arrayString2=["1","3","6","7","9","14"];正确出图。横坐标显示2.5,5.0,7.5,10.0,12.5 
        3用这个当横坐标var arrDateString = ["2010/05/20 20:20","2010/05/21 20:20","2010/05/22 20:20","2010/05/23 20:20","2010/05/24 20:20","2010/05/25 20:20"];;不出图。横坐标显示0.0,0.2,0.4,0.6,0.8,1.0
       4 用这个当横坐标var arrDateString2 = ["2010-05-20 20:20","2010-05-21 20:20","2010-05-22 20:20","2010-05-23 20:20","2010-05-24 20:20","2010-05-25 20:20"];不出图。横坐标显示0.0,0.2,0.4,0.6,0.8,1.0