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;
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();
}
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对象来说,你也可以相应的传入一个空对象{}。
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;
}