python使用open flash chart生成图表（基于pyofc2)
2014-03-15 22:38
901 查看
一直想使用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>
<script type="text/JavaScript">
function ofc_ready()
{
//alert('ofc_ready');
tmp1 = findSWF("my_chart1");
tmp2 = findSWF("my_chart2");
x1 = tmp1.load( JSON.stringify(data1) );
x2 = tmp2.load( JSON.stringify(data2) );
}
function open_flash_chart_data()
{
//alert( 'reading data' );
return JSON.stringify(data2);
}
function findSWF(movieName) {
if (navigator.appName.indexOf("Microsoft")!= -1) {
return window[movieName];
} else {
return document[movieName];
}
}
var data1 =$:chart1;
var data2 =$:chart2;
<!--
//-->
</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>
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>
<script type="text/JavaScript">
function ofc_ready()
{
//alert('ofc_ready');
tmp1 = findSWF("my_chart1");
tmp2 = findSWF("my_chart2");
x1 = tmp1.load( JSON.stringify(data1) );
x2 = tmp2.load( JSON.stringify(data2) );
}
function open_flash_chart_data()
{
//alert( 'reading data' );
return JSON.stringify(data2);
}
function findSWF(movieName) {
if (navigator.appName.indexOf("Microsoft")!= -1) {
return window[movieName];
} else {
return document[movieName];
}
}
var data1 =$:chart1;
var data2 =$:chart2;
<!--
//-->
</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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用Open Flash Chart(OFC)制作图表(Struts2处理)
- php中OpenFlashChart使用之线性图表使用例子
- 在线图表生成工具---Open Flash Chart
- Python Open Flash Chart (pyOFC2) — Home
- 如何使用Open Flash Chart制作精美的网络图表
- Open Flash Chart + PHP + Mysql生成动态图表
- PHP使用open-flash-chart生成点线图、柱形图、饼图
- Open Flash Chart + PHP + Mysql生成动态图表
- 使用Open Flash Chart(OFC)制作图表(Struts2处理)
- Flash图表组件——使用Open Flash Chart 2.0的一些问题及解决办法
- Open Flash Chart 超强的图表生成组件
- 使用Open Flash Chart(OFC)制作图表(Struts2处理)
- 使用Open Flash Chart(OFC)制作图表(Struts2处理)
- Open Flash Chart + PHP + Mysql生成动态图表
- 【有福如林】OpenFlashChart C#flash图形控件的使用
- Python模块之chardir: 使用chartdir生成各种图表
- flash图表选型分析：FusionCharts or Open Flash Chart ？
- open-flash-chart使用心得
- Open Flash Chart图表的JSON格式基本属性详解
- 开源PHP & Flash图表：Open Flash Chart