之前接觸Jpgraph時想做一下網上展示的小例子,但在琢磨透別人的做法后,總想用自己的方式做一下。借此可以鞏固一下基礎,鍛煉一下自己的思維。
本例并沒有使用Ajax實現無刷新般的顯示投票結果。在Echarts實現時再考慮Ajax的使用,學習要講求循序漸進,工作也是。
步:建立簡單的前端頁面,很簡單的。大佬要是看見了,別噴啊。我是小菜。暫不考慮代碼分離問題,其實也簡單。
-
php
-
header("content-type:text/html;charset=utf-8"); //設置網頁字符集
-
//連接MySQL服務器選擇數據庫并設定字符集
-
if(!mysql_connect("localhost".":"."3306","root","root"))
-
{
-
die("MYSQL服務器連接失敗!");
-
}
-
if(!mysql_select_db("online007"))
-
{ die("online007數據庫連接失敗");}
-
-
mysql_query("set names utf8");
-
//判斷前臺是否提交
-
if(isset($_GET['ac'])&&$_GET['ac']=='ac')
-
{ //在前臺有投票動作時獲取選定參選人對應的id以更新數據庫里參選人的計票數
-
$id=$_GET['vote'];
-
$sql="update vote set count=count+1 where electorid={$id}";
-
if(mysql_query($sql))
-
{
-
$str="您的投票成功計數,感謝您的參與。";
-
header("refresh:2;url=vote.php");
-
}
-
else
-
{
-
$str= "系統故障,投票未成功!";
-
}
-
}
-
else
-
{
-
$str="";}
-
-
?>
-
>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>參選投票title>
-
<script>
-
window.onload=function(){
-
var obj=document.getElementById("view");
-
obj.onclick=function()
-
{location.href="votecount.php";}
-
}
-
script>
-
head>
-
<body>
-
<fieldset>
-
<legend>請投下您寶貴的一票legend>
-
<form action="" method="get">
-
<input type="radio" name="vote" value="1" checked>小布什
-
<input type="radio" name="vote" value="2">奧巴馬
-
<input type="submit" value="投票">
-
<input type="hidden" name="ac" value="ac">
-
<input type="button" id="view" value="查看當前結果">
-
<label>php echo $str ?>label>
-
form>
-
fieldset>
-
body>
-
html>
前臺頁面效果:
未投票前:
投票成功:
第二步:當單擊“查看當前結果”時,在另一頁面顯示圖片,圖片由jpgraph根據數據庫相關信息生成。
-
-
header("content-type:text/html;charset=utf-8");
-
require_once ('../jpgraph/Examples/jpgraph/jpgraph.php');
-
require_once ('../jpgraph/Examples/jpgraph/jpgraph_bar.php');
-
-
-
-
if(!@mysql_connect("localhost".":"."3306","root","root"))
-
{
-
die("MYSQL服務器連接失敗!");
-
}
-
if(!@mysql_select_db("online007"))
-
{die("online007數據庫連接失敗");}
-
mysql_query("set names utf8");
-
-
$sql="select name,count from vote group by name";
-
$result=mysql_query($sql);
-
-
$arr1=array();
-
$arr2=array();
-
while($arr=mysql_fetch_assoc($result))
-
{$arr1[]=$arr['name'];
-
$arr2[]=$arr['count'];}
-
-
-
$graph = new Graph(350,250);
-
$graph->SetScale('textlin');
-
$graph->SetMarginColor('silver');
-
-
$graph->title->Set('參選人投票結果');
-
-
-
$bplot = new BarPlot($arr2);
-
$bplot->SetFillGradient('red','pink',GRAD_VERT);
-
$bplot->SetColor('darkred');
-
-
-
$graph->xaxis->SetTickLabels($arr1);
-
$graph->title->SetFont(FF_SIMSUN);
-
$graph->xaxis->SetFont(FF_SIMSUN);
-
-
$graph->Add($bplot);
-
$bplot->value->Show();
-
$bplot->value->SetFormat("%d");
-
$graph->Stroke();
-
?>
顯示投票結果圖片:
另注另一種做法:當然可以把投票結果圖片用img標簽(src屬性可以是PHP文件名)直接顯示到投票頁面,因為沒有使用ajax實現無刷新展示,所以點擊投票后頁面會有刷新時的抖動。
效果展示:
本站文章版權歸原作者及原出處所有 。內容為作者個人觀點, 并不代表本站贊同其觀點和對其真實性負責,本站只提供參考并不構成任何投資及應用建議。本站是一個個人學習交流的平臺,網站上部分文章為轉載,并不用于任何商業目的,我們已經盡可能的對作者和來源進行了通告,但是能力有限或疏忽,造成漏登,請及時聯系我們,我們將根據著作權人的要求,立即更正或者刪除有關內容。本站擁有對此聲明的最終解釋權。