python使用open flash chart生成图表（基于pyofc2)

最新推荐文章于 2025-04-25 16:39:04 发布

GavinLin99

最新推荐文章于 2025-04-25 16:39:04 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.youkuaiyun.com/chenglin1102/article/details/21299649

版权

python 同时被 3 个专栏收录

6 篇文章

订阅专栏

Django

4 篇文章

订阅专栏

openflashchart

1 篇文章

订阅专栏

一直想使用python在WEB上生成漂亮的图表，但一直找不到好的开源软件。经过几天的努力终于实现了使用pyofc2绘制基于FLASH的图表，下面把我的步骤写下来供大家参考：
1、下载open flash chart 在http://teethgrinder.co.uk/open-flash-chart-2/downloads.php（这里注意下载过来的open-flash-chart.swf好像有点问题，我始终无法使用这个文件绘制出稍微复杂一些的图表，最后还是在pyofc2的demo上http://btbytes.github.com/pyofc2/open-flash-chart.swf
重新下载了open-flash-chart.swf后才可以），安装比较简单，我是使用phtyon的，直接把js目录和open-flash-chart.swf放到web服务器的根目录就可以了，我使用的是web.py所以我放在static这个目录下
2、下载pyofc2,这个在pypi上下载就可以了，解压后在目录下执行：python setup.py install等一会就可以安装成功了（可能需要连接上互联网，下载一些依赖模块)
3、open flash chart的使用还是比较简单的，强烈建议你访问http://teethgrinder.co.uk/open-flash-chart-2/tutorial.php，这上面有最基础的东西，我这里只会写一些在python里需要注意的东西
首先我的python版本是2.6，使用的WEB环境为web.py,使用前需要把js目录和open-flash-chart.swf放到static这个目录下，下面是一个示例,该示例在一个页面里显示两个不同的图表：
chart.py:
#-* -coding: UTF-8 -* -
#create by qh 2012-04-06 for test pyofc2
import web
import urllib
from web import form
from pyofc2 import *
import time
urls = (
'/login','Login',
'/logout','Logout',
'/chart','chart',
'/(.*)', 'index'
)

app = web.application(urls, globals())

class index:
def GET(self,page):
  render = web.template.render('chart')
  return render.index()

class chart:
def GET(self):
  render = web.template.render('chart')
  #定义一个简单的线图
  t = title(text=time.strftime('%a %Y %b %d'))
  l=line()
  l.values = [9,8,7,6,5,4,3,2,1]
  chart = open_flash_chart()
  chart.title = t
  chart.add_element(l)

  #下面定义一个复杂一些的曲线图
  t2 = title(text='图表2')
  a=scatter_line(colour="#FFD600", dot_size=3)
  #定义每个点的坐标，实际应用中应该从数据库里取出，实际上就是一个列表，该列表由若干个dict组成，每个dict都有x和y两个key
  a.values =[ { "x": 0, "y": 0 }, { "x": 1.2, "y": 0.5 }, { "x": 2.5, "y": -0.9 }, { "x": 3.2, "y": -2.6 }, { "x": 4.6, "y": -2.6 }, { "x": 6, "y": -2.3 }, { "x": 7.5, "y": -0.4 }, { "x": 8.9, "y": 0.2 }, { "x": 10, "y": -1.7 }, { "x": 11, "y": -2.1 }, { "x": 11.6, "y": -3.2 }, { "x": 12.2, "y": -3.1 }, { "x": 13.2, "y": -1.3 }, { "x": 14.5, "y": -3.2 }, { "x": 15.3, "y": -4.3 }, { "x": 15.9, "y": -4.2 }, { "x": 16.5, "y": -5.6 }, { "x": 17.3, "y": -4.4 }, { "x": 18.7, "y": -2.7 }, { "x": 19.6, "y": -2.7 }, { "x": 20.1, "y": -1.7 }, { "x": 21.3, "y": -2.8 }, { "x": 22.7, "y": -4.6 }, { "x": 23.3, "y": -4.3 }, { "x": 24.8, "y": -4.5 } ]
  #定义X轴
  x2=x_axis()
  #X轴的长度
  x2.min, x2.max = 0,25
  #X轴显示的标签（默认是从0开始的数字）
  lbl = labels(labels=['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'])
  x2.labels = lbl
  #定义Y轴
  y2  = y_axis()
  y2.min, y2.max = -10, 10

  #OK，创建图表
  chart2 = open_flash_chart()
  chart2.title = t2
  chart2.add_element(a)
  chart2.x_axis=x2
  chart2.y_axis=y2
  return render.chart(str(chart),str(chart2))

  #chart.py结束
  下面看看chart.html,对于这个我不多做解释了，详细请参考http://teethgrinder.co.uk/open-flash-chart-2/tutorial.php
  实际上就是：1、你访问了http://127.0.0.1/chart时chart.py生成图表数据（JSON格式)，并通过chart1和chart2两个变量传给模板chart.html
  2、模板chart.html把图表数据写入html文件中的js变量data1和data2
  3、在客户端上执行javascript把这两个数据加载到相应的div图表中，这里是my_chart1和my_chart2
  4、要注意的是open-flash-chart.swf会主动调用javascript函数open_flash_chart_data去获取数据，并加载到图表中，加载完后又会主动调用javascript函数ofc_ready(),而我们正是在function ofc_ready()实现对不同的图表加载不同的数据
  $def with (chart1,chart2)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pyofc2 test</title>
<script type="text/javascript" src="/static/js/json/json2.js"></script>
<script type="text/javascript" src="/static/js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("/static/open-flash-chart.swf", "my_chart1", "350", "200", "9.0.0");
swfobject.embedSWF("/static/open-flash-chart.swf", "my_chart2", "650", "400", "9.0.0");
</script>

function open_flash_chart_data()
{
//alert( 'reading data' );
return JSON.stringify(data2);
}

<!--

//-->
</script>
</head>

<body>
<div align="center">
<h1>曲线图</h1>

<p>chart1 begin</p>

<div id="my_chart1"></div>
<p>chart1 end</p>
</div>
<div align="center">
<div align="center">chart2 begin </div>
<div id="my_chart2"></div>
<p> </p>
</body>
</html>