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的代码
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的代码
{
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（）方法
{
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;
}
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
