nav-left cat-right
cat-right

open flash chart应用-投票

Posted by im502 in Flash, Jquery, PHP on 02 18th, 2009 | 10 responses

先看演示：DEMO

闲来没事，用ofc搞了一个投票小程序，进一步巩固一下ofc和jquery，试验一下ofc里加入onclick时间的效果，果然很好用，而且调用js的功能函数相当方便，只需在json数据里加入“”on-click”,”myfunction(parm)””就可以，投票程序代码写的很简单，没有做什么优化。

废话少说，看代码：

本程序是需要投票统计网友来源，有四个选项分别是：百度、谷歌、雅虎、其他，数据以data.txt文本存放，格式为：2,5,12,6。

数据处理：setvote.php

?View Code PHP
session_start();
if($_REQUEST["vote"]!=0) {
    //处理统一IP投票的问题，这里这个方法很不好，各位大大自己去修正吧，我去打酱油了:-)
    if(isset($_SESSION['ip'])) {
        echo '
        {
 
          "title":{
            "text":"IP地址：'.$_SESSION['ip'].',您已经投票了 谢谢支持",
            "style":"{font-size: 20px;color:#FF0000;}"
          }}';
    } else {
        $vote = $_REQUEST["vote"];//取得投票参数
        $_SESSION['ip'] = $_SERVER['REMOTE_ADDR'];//记录投票者IP
        $data=file_get_contents("data.txt");//读取投票数据
        list($a, $b, $c,$d) = explode(",",$data);//分解数据
        //处理传递过来的投票参数
        switch($vote) {
            case '1':
            $a +=1;
            break;
            case '2':
            $b +=1;
            break;
            case '3':
            $c +=1;
            break;
            case '4':
            $d +=1;
            break;
        }
        //逗号连接数据并写入投票数据到文件
        $newdata = $a.','.$b.','.$c.','.$d;
 
        file_put_contents("data.txt",$newdata,LOCK_EX);
        $totalvote = ($a+$b+$c+$d);
        echo '
        {
           "title":{
                "text":"投票:您是从哪里知道IM502的? 已经有'.$totalvote.'位网友投票",
                "style":"{font-size: 18px;}"
           },
 
          "elements":[
            {
              "type":      "pie",
              "colours":   ["#d01f3c","#356aa0","#C79810","#93C96B"],
              "alpha":     0.6,
              "border":    2,
              "animate":   0,
              "start-angle": 35,
              "values" :   [
                {"value":'.$a.',"font-size":14,"colours":"#d01f3c","label":"百度搜索:'. round(($a*100/$totalvote), 2).'%('.$a.' )", "tip":"点击投票:百度搜索","on-click":"vote(1)"},
                {"value":'.$b.',"font-size":14,"colours":"#356aa0","label":"谷歌搜索:'. round(($b*100/$totalvote), 2).'%('.$b.')", "tip":"点击投票:谷歌搜索","on-click":"vote(2)"},
                {"value":'.$c.',"font-size":14,"colours":"#C79810","label":"朋友推荐:'. round(($c*100/$totalvote), 2).'%('.$c.')", "tip":"点击投票:朋友推荐","on-click":"vote(3)"},
                {"value":'.$d.',"font-size":14,"colours":"#93C96B","label":"其他:'. round(($d*100/$totalvote), 2).'%('.$d.')", "tip":"点击投票:其他","on-click":"vote(4)"}
              ]
            }
          ]
        }';
    }
} else {
    $data=file_get_contents("data.txt");
    list($a, $b, $c,$d) = explode(",",$data);
    $totalvote=($a+$b+$c+$d);
    echo '
    {
 
      "title":{
        "text":"投票:您是从哪里知道IM502的? 已经有'.$totalvote.'位网友投票",
        "style":"{font-size: 20px;}"
      },
 
      "elements":[
        {
          "type":      "pie",
          "colours":   ["#d01f3c","#356aa0","#C79810","#93C96B"],
          "alpha":     0.6,
          "border":    2,
          "animate":   0,
          "start-angle": 35,
          "values" :   [
            {"value":'.$a.',"font-size":14,"colours":"#d01f3c","label":"百度搜索:'. round(($a*100/$totalvote), 2).'%('.$a.' )", "tip":"点击投票:百度搜索","on-click":"vote(1)"},
            {"value":'.$b.',"font-size":14,"colours":"#356aa0","label":"谷歌搜索:'. round(($b*100/$totalvote), 2).'%('.$b.')", "tip":"点击投票:谷歌搜索","on-click":"vote(2)"},
            {"value":'.$c.',"font-size":14,"colours":"#C79810","label":"朋友推荐:'. round(($c*100/$totalvote), 2).'%('.$c.')", "tip":"点击投票:朋友推荐","on-click":"vote(3)"},
            {"value":'.$d.',"font-size":14,"colours":"#93C96B","label":"其他:'. round(($d*100/$totalvote), 2).'%('.$d.')", "tip":"点击投票:其他","on-click":"vote(4)"}
          ]
        }
      ]
    }';
}

主要JS代码：

?View Code JAVASCRIPT
function open_flash_chart_data()
{
	alert( 'reading data' );
	return JSON.stringify(data);
}
 
function findSWF(movieName) {
  if (navigator.appName.indexOf("Microsoft")!= -1) {
    return window[movieName];
  } else {
    return document[movieName];
  }
}
function vote(id) {
    //发送数据请求，返回OFC需要的json数据
    jQuery.getJSON("setvote.php", {vote:id}, function(data) {
        if (data.title.text.substring(0,2)=="IP") {
            alert(data.title.text);
        } else {
            newvote = findSWF("votechart");
            ss = newvote.load(JSON.stringify(data));
            if (id>0) {
                alert("投票成功感谢您的支持");
            }
        }
 
	});
    return false;
}

投票页只需要加载ofc所需要的json2.js、swfobject.js以及jquery就可以，jquery实现无刷新投票。
body加上onload=”vote(0);”初始化图表。
欢迎喜欢ofc的朋友一起讨论。

10 条评论

  1. avatar nav-left

    不错,作者也是喜欢研究OFC的人.我也是

    nav-left
  2. avatar nav-left

    你好，我正在使用ofc，遇到一些问题，不知能不能请教你一下。Email联系

    nav-left
  3. avatar nav-left

    已给你发邮件！ 直接回复就可以了，谢谢关注！

    nav-left
  4. avatar
    digibread Says:
    六月 12th, 2009 at 23:54
    nav-left

    站长做的很漂亮，不过我在学习您的代码时，遇到newvote.load is not a function的错误，查遍了网上的资料也没有结果。
    我现在要做的效果是在一个页面中，当点击不同的按钮，出现不同的图片。也就是用Ajax动态的的加载接送数据给图表。
    不知是否能指点一二，非常感谢。

    nav-left
  5. avatar nav-left

    是不是缺少了findSWF函数，另外Ajax动态加载图片不需要用图表吧？

    nav-left
  6. avatar nav-left

    我也遇到了相同的问题，说load不是可用的方法，不知道博主有没有什么建议？
    我有findswf的，直接用的官网的那个版本，不知道是不是因为这个的缘故？

    nav-left
  7. avatar nav-left

    这个就不晓得了

    nav-left
  8. avatar nav-left

    我需要用ofc做一个实时图 遇到了一些问题 能否请教一下你~

    nav-left
  9. avatar nav-left

    有什么问题留在这里我看到会回复的，或者留下你的QQ或MSN我加你，我的msn:im502(a)live.com

    nav-left
  10. avatar nav-left

    同样的，遇到报.load is not a function的错误。

    nav-left

这篇文章上的评论的 RSS feed

抱歉，评论已关闭。