Question

我正在尝试在两个自定义日期范围之间绘制历史邮件图表，用户将选择日期范围，并根据选择我将从我的数据库中检索数据并转到绘图图表。根据选择从数据库中检索数据已完成，但在flot chart中绘制该数据不会产生结果。下面是我试图绘制的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>  
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
<title>Flot Examples: Real-time updates</title>    
<script data-require="jquery@2.1.3" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>   
<script data-require="flot@0.8.2" data-semver="0.8.2" src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>   
<script data-require="flot@0.8.2" data-semver="0.8.2" src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.time.min.js"></script>   
<link href="style.css" rel="stylesheet" type="text/css" />   
<script type="text/javascript">

  
$(function() 
{ 
function GetData()
{
var data = []; 
var now = new Date().getTime(); 
var res;    
data.shift(); //to remove first item of array
var str = [[1475210230423,64.51024424527357],[1475210232423,26.131426274344072]];   
data.push(str); 
$.plot($("#placeholder"), [data], {series: {    
lines: {       
show: true,        
lineWidth: 1.2,        
fill: true
    }
    },        
yaxis: {        
min: 0,        
max: 100      
},       
xaxis: {
mode: "time", minTickSize: [1, "day"]
}
}    
);}
GetData();
});

  
</script>  
</head>  
<body>    
<div id="header">      
<h2>HISTORICAL CHART</h2>    
</div>
<div id="content">      
<div class="demo-container">        
<div id="placeholder" class="demo-placeholder"></div>     
</div>         </div>    
<div id="footer">	
	Copyright © 2007 - 2014 IOLA and Ole Laursen	
</div>  
</body>
</html>

Answer 1

        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    <html>  
    <head>    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
    <title>Flot Examples: Real-time updates</title>    
    <script  src="https://code.jquery.com/jquery-2.1.3.min.js"></script>   
    <script  src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>   
    <script  src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.time.min.js"></script>   
    <link href="style.css" rel="stylesheet" type="text/css" />   
    <script type="text/javascript">


    $(function() 
    { 
    function GetData()
    {
    var data = []; 
    var now = new Date().getTime(); 
    var res;    
    data.shift(); //to remove first item of array
    var str = [[1475210230423,64.51024424527357],[1475210232423,26.131426274344072]];   

    data.push(str); 
    $.plot($("#placeholder"), data, {series: {    
    lines: {       
    show: true,        
    lineWidth: 1.2,        
    fill: true
        }
        },        
    yaxis: {        
    min: 0,        
    max: 100      
    },       
    xaxis: {
    mode: "time", minTickSize: [1, "day"]
    }
    }    
    );}
    GetData();
    });


    </script>  
    </head>  
    <body>    
    <div id="header">      
    <h2>HISTORICAL CHART</h2>    
    </div>
    <div id="content">      
    <div class="demo-container">        
    <div id="placeholder" class="demo-placeholder"  style="height:300px;"></div>     
    </div>         </div>    
    <div id="footer">   
            Copyright © 2007 - 2014 IOLA and Ole Laursen    
    </div>  

    </body>
    </html>

绘制两个自定义日期范围之间的历史故事图表

1 个答案: