OFC学习笔记（一） --- .Net WinForm环境下制作Open Flash Chart
Open Flash Chart是一个开源的Flash图表制作工具，基本都是在Web环境下进行制作，网上资料也相对较少，其官网http://teethgrinder.co.uk/open-flash-chart/提供的资料并没有在WinForm下操作，而且其数据文件大都是以php文件给出，与.Net相关例子并不多，因此这两天自己在WinForm下借助WebBrowser展现Flash Chart，赶紧记录下制作过程：
制作Open Flash Chart一般需要有两个文件：HTML页面文件和数据文件。
在制作前有三个文件是必备的：OpenFlashChart.dll，swfobject.js和open-flash-chart.swf，如有需要可到这里http://download.csdn.net/source/3023109下载
1、先在桌面新建一文件夹OFCWinFormDemo，并在OFCWinFormDemo里面另外再新建两个文件夹data和OpenFlashChart，并把swfobject.js和open-flash-chart.swf放在OpenFlashChart文件夹下，data文件夹是用来存放txt数据文件的，所以OFCWinFormDemo文件夹里面现在就差两个文件：HTML页面文件和数据文件。说明：我这边是为了方便测试把文件夹建在桌面，读者大可根据你的需要建在合适的位置。
2、现在就让VS帮你产生那两个文件。打开VS新建一工程，取名OFCDemo，在Form1放置两个按钮和一个WebBrowser控件，一个按钮用来生成HTML文件，另一个则是通过WebBrowser控件显示FlashChart，cs代码如下（务必添加OpenFlashChart.dll引用）：
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using OpenFlashChart; using System.IO; namespace OFCDemo { public partial class Form1 : Form { /// <summary> /// 数据文件路径 /// 可以有多种格式，如txt、php、json等，我这边以txt为例 /// </summary> string dataFilePath = @"C:/Documents and Settings/Administrator/桌面/OFCWinFormDemo/data/data.txt"; /// <summary> /// HTML文件路径 /// </summary> string htmlFilePath = @"C:/Documents and Settings/Administrator/桌面/OFCWinFormDemo/OFCTest.html"; public Form1( ) { InitializeComponent( ); } /// <summary> /// 生成txt数据文件 /// </summary> private void generateData( ) { List<int> data = new List<int>( ); List<string> labels = new List<string>( ); for ( int i=0 ; i<16 ; i++ ) { data.Add( i*i ); labels.Add( i.ToString( ) ); } Graph chart = new Graph( ); chart.Title = new Title( "Area Chart 2" , "{font-size: 26px;}" ); OpenFlashChart.Charts.ChartData chartData; chartData = new OpenFlashChart.Charts.AreaHollow( 2 , 3 , "#C11B01" , 25 , "Squared" , 12 , "#8E560F" ); //填充数据 foreach ( int i in data ) { chartData.Data.Add( i ); } //设置横轴文本 chart.Data.Add( chartData ); foreach ( string str in labels ) { chart.LabelsX.Add( str ); } chart.LabelStyleX = new LabelStyleX( 10 , "#000000" , 0 , 2 ); chart.AxisStepsX = 2; chart.LegendX = new LegendX( "X squared" , 12 , "#C11B01" ); chart.MinY=0; chart.MaxY = 225; chart.StepsY=15; chart.LegendY = new LegendY( "Value" , 12 , "#C11B01" ); File.WriteAllText( dataFilePath , chart.ToString( ) ); } /// <summary> /// 生成HTML文档 /// </summary> private void btnReport_Click( object sender , EventArgs e ) { generateData( ); StringBuilder htmlContent = new StringBuilder( ); htmlContent.Append( "<html>" + "/r/n" ); htmlContent.Append( " <head>" + "/r/n" ); htmlContent.Append( " <title> 无标题页 </title>" + "/r/n" ); htmlContent.Append( " <mce:script type='text/javascript' src="OpenFlashChart/swfobject.js" mce_src="OpenFlashChart/swfobject.js"></mce:script>" + "/r/n" ); htmlContent.Append( " <mce:script type='text/javascript' defer='defer'><!-- " + "/r/n" ); htmlContent.Append( " var so = new SWFObject('OpenFlashChart/open-flash-chart.swf', 'ofc', '500', '300', '9', '#FFFFFF');" + "/r/n" ); htmlContent.Append( " so.addVariable('data', 'data/data.txt');" + "/r/n" ); htmlContent.Append( " so.write( 'OFCChart' );" + "/r/n" ); htmlContent.Append( " // --></mce:script>" + "/r/n" ); htmlContent.Append( " </head>" + "/r/n" ); htmlContent.Append( " <body>" + "/r/n" ); htmlContent.Append( " <div id='OFCChart' />" + "/r/n" ); htmlContent.Append( " </body>" + "/r/n" ); htmlContent.Append( "</html>" ); //以Unicode编码形式将html内容写到指定的文件中 File.WriteAllText( htmlFilePath , htmlContent.ToString( ) , Encoding.Unicode ); } /// <summary> /// 查看FlashChart /// </summary> private void btnViewReport_Click( object sender , EventArgs e ) { webBrowser1.Url = new Uri( htmlFilePath ); } private void Form1_FormClosing( object sender , FormClosingEventArgs e ) { //关闭窗体时 抑制显示“脚本出现错误” 提示框 webBrowser1.ScriptErrorsSuppressed = true; } } }
3、运行后点击“生成HTML文件”按钮，这样就会在指定位置（我这边就是桌面的OFCWinFormDemo文件夹）产生一个HTML文件，生成的HTML文件是这样的（里面的注释是后面自己加上去的，方便理解）：
<html> <head> <title> 无标题页 </title> <mce:script type='text/javascript' src="OpenFlashChart/swfobject.js" mce_src="OpenFlashChart/swfobject.js"></mce:script> <mce:script type='text/javascript' defer='defer'><!-- //参数3：Width；参数4：Height；参数5：Flash版本号；参数6：图表未展现前的背景色 var so = new SWFObject('OpenFlashChart/open-flash-chart.swf', 'ofc', '500', '300', '9', '#FFFFFF'); //指定数据文件 so.addVariable('data', 'data/data.txt'); so.write( 'OFCChart' ); // --></mce:script> </head> <body> <div id='OFCChart' /> </body> </html>
4、点击“查看FlashChart”按钮，则可在WebBrowser看到Flash Chart，效果是挺不错的 :)
本例其实就是官网中的Area Chart - 2例子http://teethgrinder.co.uk/open-flash-chart/gallery-area-2.php，仅仅只是对其php数据文件改造成.Net而已。本人也在学习中，大家若有好的建议欢迎探讨。。