OpenFlashChart是一款开源的以Flash和Javascript为技术基础的免费图表组件,用它能创建一些很有效果的报表分析图表。

最重要的是它是开源和免费的,该组件使用flash展示报表能够很好的做到与浏览器进行集成,目前浏览器基本都能很好的支持flash。

 

基本原理和owc11绘图一样,也是html页面用前台控件显示.aspx.cs生成的图片

前提:

引用OpenFlashChart.dll

两个swf:expressInstall.swf 和open-flash-chart-SimplifiedChinese.swf(支持中文),open-flash-chart.swf(英文版)中的一个

一个js:swfobject_modified.js

 

1、html代码

    <script src="/Js/swfobject_modified.js" type="text/javascript"></script>

 

<div id="pie"></div>

 

 <script type="text/javascript">

  var url = encodeURI("Graph_jdpg.aspx?xfjgbh=" + xfjgbh + "&xfdwjb=" + xfdwjb+ "&cxlx=" + cxlx);
        url=url.replace(/&/g,'%26').toString();
        loadSwf("pie",url,'320','190');////建档评估的饼图 320,190分别为宽和高,pie是显示flash的div的ID,url是生成flash的aspx页面。

       function loadSwf(target,url,w,h)//target:显示flash的div的id
       {
         swfobject.embedSWF("/Js/open-flash-chart.swf", target, w, h,"9.0.0", "/Js/expressInstall.swf", { "data-file": url,"loading":"正在分析..."});      
       }

</script>

 

2、Graph_jdpg.aspx.cs代码

using OpenFlashChart;
using XAxis = OpenFlashChart.XAxis;
using YAxis = OpenFlashChart.YAxis;

生成饼状图flash的代码 
DataSet ds = null;
string sql = string.Empty;
string xfdwjb = string.Empty;
string xfjgbh = string.Empty;
if (Request.QueryString["xfdwjb"] != null && Request.QueryString["xfjgbh"] != null)
{
xfdwjb
= Request.QueryString["xfdwjb"].ToString().Trim();
xfjgbh
= Request.QueryString["xfjgbh"].ToString().Trim();
DAL.XFJG d_xfjg
= new DAL.XFJG();

ds
= d_xfjg.GetXFJGListProc(xfdwjb, xfjgbh, "getGraph_jdpg");
}

if (ds.Tables[0].Rows.Count > 0)
{
string[] colorArr = new string[] { "#00aaff", "#ff0022", "#ff8866", "#006611", "#0088bb", "#ff0055", "#00bbff", "#7711dd", "#FF00FF", "#FFDF55", "#00FFFF", "#00CFFF", "#CEFFCE", "#CE9AFF", "#99CC66" };

OpenFlashChart.OpenFlashChart chart
= new OpenFlashChart.OpenFlashChart();
chart.Title
= new Title(" ");
//chart.Title.Style = "font-size:14px;font-family:微软雅黑 宋体 Arial;color:red;";

List
<PieValue> ps=new List<PieValue> ();
foreach (DataRow dr in ds.Tables[0].Rows)
{
double val = Convert.ToDouble(dr["val"]);
PieValue pv
= new PieValue(val);
pv.Text
= dr["mc"].ToString();
ps.Add(pv);
}
Pie pie
= new Pie();
pie.Tooltip
= "#label#档案:#val#户<br>所占比例:#percent#";//提示信息
pie.Values = ps;
pie.FontSize
= 13;
pie.Alpha
= 0.8;
pie.Colours
= colorArr;

//动画效果
PieAnimationSeries pieAnimationSeries = new PieAnimationSeries();
pieAnimationSeries.Add(
new PieAnimation("bounce", 5));
pie.Animate
= pieAnimationSeries;

chart.Bgcolor
= "#FFFFFF";
chart.AddElement(pie);

Response.Clear();
Response.CacheControl
= "no-cache";
Response.Write(chart.ToPrettyString());
Response.End();
}

 

生成柱状图flash的代码
if (ds.Tables[0].Rows.Count > 0)
{
string[] colorArr = new string[] { "#00aaff", "#ff0022", "#ff8866", "#006611", "#0088bb", "#ff0055", "#00bbff", "#7711dd", "#FF00FF", "#FFDF55", "#00FFFF", "#00CFFF", "#CEFFCE", "#CE9AFF", "#99CC66" };

OpenFlashChart.OpenFlashChart chart
= new OpenFlashChart.OpenFlashChart();
chart.Title
= new Title(" ");
chart.Title.Style
= "font-size:14px;font-family:微软雅黑 宋体 Arial;";

List
<string> yas = new List<string>();
List
<string> xas = new List<string>();
List
<BarValue> bvs = new List<BarValue>();
double max = 0.0;
foreach (DataRow dr in ds.Tables[0].Rows)
{
double val = Convert.ToDouble(dr["val"]);
BarValue bv
= new BarValue(val);
bv.Tip
= dr["val"].ToString() + "%";
bv.Color
= colorArr[ds.Tables[0].Rows.IndexOf(dr)];//设置柱状图颜色
xas.Add(dr["mc"].ToString());
yas.Add(dr[
"val"].ToString());
bvs.Add(bv);
max
= val > max ? val : max;
}

Bar bd
= new Bar();
bd.Values
= bvs;
bd.FillAlpha
= 0.8;
bd.OnShowAnimation
= new Animation("grow-up", 1, 0.5);//动画效果

XAxis xa
= new XAxis();
// xa.Axis3D = 2;
xa.Colour = "#909090"; //x轴颜色
xa.Labels.SetLabels(xas); //x轴显示的数据
xa.Labels.FontSize = 13;//x轴字体大小
xa.Offset = true;
xa.Labels.Color
= "#000000";//轴字体颜色
xa.GridColour = "#FFFFFF";//x轴网格颜色
//xa.Labels.Vertical = true;//此处3行 只有open-flash-chart-SimplifiedChinese.swf才支持中文的x轴的值
//if (ds.Tables[0].Rows.Count > 10)//x轴坐标间隔数大于10,设置为45度倾斜
//xa.Labels.Rotate = "45";

max
=getRange(max);//根据所有数据,计算y轴最大值

YAxis ya
= new YAxis();
ya.Steps
= (int)(max == 20 ? 10 : 20);
ya.SetRange(
0, max);
ya.Offset
= true;
ya.GridColour
= "#FFFFFF";
ya.TickLength
= 5;
ya.Stroke
= 1;

chart.X_Axis
= xa;
chart.Y_Axis
= ya;
chart.Bgcolor
= "#FFFFFF";//柱状图背景色
chart.AddElement(bd);


Response.Clear();
Response.CacheControl
= "no-cache";//不缓存
Response.Write(chart.ToPrettyString());
Response.End();
}

 

chart.X_Axis.Labels.Rotate 設置 X 轴标签的旋转方式,可选择vertical=true或flase, 当使用英文版的open-flash-chart.swf时,设置vertical 旋转中文显示不出来,此處為 Bug 。 只有用中文版的open-flash-chart-SimplifiedChinese.swf才能显示斜体的x轴标签,例如:xa.Labels.Rotate = "45",表示倾斜45度。

 

详细讲解脚本swfobject.js

用JavaScript嵌入你的SWF, swfobject.js使用简介

swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes)有5个必须的参数和4个可选的参数:

swfUrl(String,必须的)指定SWF的URL。

id(String,必须的)指定将会被Flash内容替换的HTML元素(包含你的替换内容)的id。

width(String,必须的)指定SWF的宽。

height(String,必须的)指定SWF的高。

version(String,必须的)指定你发布的SWF对应的Flash Player版本(格式为:major.minor.release)。

expressInstallSwfurl(String,可选的)指定express install SWF的URL并激活Adobe express install [ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75 ]。

flashvars(String,可选的)用name:value对指定你的flashvars。

params(String,可选的)用name:value对指定你的嵌套object元素的params。

attributes(String,可选的)用name:value对指定object的属性。

注意:在不破坏参数顺序的情况下,你可以忽略可选参数。如果你不想使用一个可选参数,但是会使用后面的一个可选参数,你可以简单的传入false作为参数的值。对flashvars、 params和 attributes这些JavaScript对象来说,你也可以相应的传入一个空对象{}。

 

 

getRange()方法
protected double getRange(double max)
{
double val = max;
int s = 1;
int i = 1;
while (s > 0)
{
s
= (int)(max / (Math.Pow(10, i) * 2));
i
++;
}
i
= i - 2 > 0 ? i - 2 : 1;
s
= (int)(max / (Math.Pow(10, i) * 2));
val
= (s + 1) * (Math.Pow(10, i) * 2);

return val > 100 ? 100 : val;
}

 

 

posted on 2010-08-12 21:35  不远道人  阅读(4675)  评论(1编辑  收藏  举报