nav-left cat-right
cat-right

open-flash-chart2系列教程(1)

年底了,公司要统计销售数据,于是就找了几个开源免费的chart程序来研究,PHP/SWF Charts FusionCharts Free,不过最终还是选择了Open Flash Char,官方提供了很多实例,而做订单的销售统计并不需要多么花哨的东西,OFC2的功能也已经足够强大了。
2.0的版本数据格式完全用json来处理,非常灵活,官方提供了各种接口程序,包括PHP/PHP5、Pear、Python、Java、Dotnet,调用很简单

<html>
<head>
 
<script type=”text/javascript” src=”js/swfobject.js”></script>
<script type=”text/javascript”>
swfobject.embedSWF(
  “open-flash-chart.swf”, “my_chart”, “550″, “200″,
  “9.0.0″, “expressInstall.swf”,
  {“data-file”:”data.txt”}
  );
</script>
</head>
<body>
<p>Hello World</p>
<div id=”my_chart”></div>
</body>
</html>

数据文件格式如下:

{
  “y_legend”:{
    “text”:   “Time of day”,
    “style”: “{color: #736AFF;}”
  },
“elements”:[
    {
      "type":      "line",
      "colour":    "#736AFF",
      "text":      "Avg. wave height (cm)",
      "font-size": 10,
      "width":     2,
      "dot-size":  4,
      "halo-size": 0,
      "values" :   [1.5,1.69,1.88,2.06,2.21,2.34,2.43,2.48,2.49,2.47,2.40,2.30,2.17,2.01,1.83,1.64,1.44,1.24,1.05,0.88,0.74,0.62,0.54,0.50,0.50,0.54,0.61,0.72,0.86,1.03,1.22,1.41,1.61,1.81,1.99,2.15,2.29,2.39,2.46,2.49,2.48,
{"value":2.44,"colour":"#FF0000","tip":"monkies"},2.35,2.23,2.08]
    }
  ], “x_axis”:{
    “labels”: {
      “rotate”: “vertical”,
      “labels”:["2:00am % ?,"2:10","2:20","2:30","2:40","2:50",
                "3:00am","3:10","3:20","3:30","3:40","3:50",
                "4:00am","4:10","4:20","4:30","4:40","4:50",
                "5:00am","5:10","5:20","5:30","5:40","5:50",
                "6:00am","6:10","6:20","6:30","6:40","6:50",
                "7:00am","7:10","7:20","7:30","7:40","7:50",
                "8:00am","8:10","8:20","8:30","8:40","8:50",
                "9:00am","9:10","9:20"]
    }
  },
“y_axis”:{
    “max”:   3
  }}

数据放在data.txt里,演示

评论暂缺 »

还没有任何评论。

这篇文章上的评论 RSS feed TrackBack URL

留下评论