OFC学习笔记（二） --- 一个页面显示多个Chart
注意这边每个Flash Chart务必用一个“容器”来承载它，若如下这样：
<body>
<div id='OFCChart1' />
<div id='OFCChart2' />
</body>
则只能显示第一个div展示的Flash Chart，第二个div则无法显示。所以应该类似这样（用div承载）：
<body>
<div>
<div id='OFCChart1' />
</div>
<div>
<div id='OFCChart2' />
</div>
</body>
但是本文将以table里的td作为承载容器，具体参看代码，若有疑问参看第一篇http://blog.csdn.net/luols/archive/2011/02/15/6186275.aspx，若还有疑问欢迎探讨。。
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> /// 数据文件根目录 /// </summary> string dataFileRootPath = @"C:/Documents and Settings/Administrator/桌面/OFCWinFormDemo/data/"; /// <summary> /// HTML文件路径 /// </summary> string htmlFilePath = @"C:/Documents and Settings/Administrator/桌面/OFCWinFormDemo/OFCTest.html"; StringBuilder htmlContent = new StringBuilder( ); public Form1( ) { InitializeComponent( ); } /// <summary> /// 生成data1.txt数据文件 /// </summary> private void generateData1( ) { 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( dataFileRootPath + "data1.txt" , chart.ToString( ) ); } /// <summary> /// 生成data2.txt数据文件 /// </summary> private void generateData2( ) { Random ran = new Random( (int)DateTime.Now.Ticks*10000000 ); OpenFlashChart.Charts.ChartData redBar; redBar = new OpenFlashChart.Charts.Bar3D( 75 , "#D54C78" , "2006" , 10 ); //填充数据 for ( int i=0 ; i<10 ; i++ ) { redBar.Data.Add( ran.Next( 2 , 5 ) ); } OpenFlashChart.Charts.ChartData blueBar; blueBar = new OpenFlashChart.Charts.Bar3D( 75 , "#3334AD" , "2007" , 10 ); //填充数据 for ( int i=0 ; i<10 ; i++ ) { blueBar.Data.Add( ran.Next( 5 , 9 ) ); } Graph chart = new Graph( ); chart.Title = new Title( "3D Bar Chart" , "{font-size:20px; color: #FFFFFF; margin: 5px; background-color: #505050; padding:5px; padding-left: 20px; padding-right: 20px;}" ); chart.Data.Add( redBar ); chart.Data.Add( blueBar ); chart.AxisX3D = 12; chart.AxisColorX = "#909090"; chart.AxisColorY = "#ADB5C7"; chart.LabelsX = new List<string> { "January" , "February" , "March" , "April" , "May" , "June" , "July" , "August" , "September" , "October" }; chart.MaxY = 10; chart.StepsY = 5; chart.LegendY = new LegendY( "Open Flash Chart" , 12 , "#736AFF" ); File.WriteAllText( dataFileRootPath + "data2.txt" , chart.ToString( ) ); } /// <summary> /// 生成HTML文档 /// </summary> private void btnReport_Click( object sender , EventArgs e ) { generateData1( ); generateData2( ); 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( " </head>" + "/r/n" ); htmlContent.Append( " <body>" + "/r/n" ); htmlContent.Append( " <table width='100%'>" + "/r/n" ); AddNewOFCChart( "td_ofc1" , "data/data1.txt" , 500 , 250 ); AddNewOFCChart( "td_ofc2" , "data/data2.txt" , 600 , 200 ); htmlContent.Append( " </table>" + "/r/n" ); htmlContent.Append( " </body>" + "/r/n" ); htmlContent.Append( "</html>" ); //以Unicode编码形式将html内容写到指定的文件中 File.WriteAllText( htmlFilePath , htmlContent.ToString( ) , Encoding.Unicode ); } /// <summary> /// 添加一个OFC /// </summary> /// <param name="tdChartId">承载Chart的TD的ID</param> /// <param name="dataFilePath">数据文件</param> /// <param name="width">Chart宽度</param> /// <param name="height">chart高度</param> private void AddNewOFCChart( string tdChartId , string dataFilePath , int width , int height ) { htmlContent.Append( " <tr><td id='" + tdChartId + "' align='center'>" + "/r/n" ); htmlContent.Append( " <mce:script type='text/javascript'><!-- " + "/r/n" ); htmlContent.Append( " var so = new SWFObject('OpenFlashChart/open-flash-chart.swf', 'ofc', '" + width + "', '" + height + "', '9', '#FFFFFF');" + "/r/n" ); htmlContent.Append( " so.addVariable('data', '" + dataFilePath + "');" + "/r/n" ); htmlContent.Append( " so.write('" + tdChartId + "');" + "/r/n" ); htmlContent.Append( " // --></mce:script>" + "/r/n" ); htmlContent.Append( " </td></tr>" + "/r/n" ); } /// <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; } } }
生成的HTML文件源码：
<html> <head> <title> 无标题页 </title> <mce:script type='text/javascript' src="OpenFlashChart/swfobject.js" mce_src="OpenFlashChart/swfobject.js"></mce:script> </head> <body> <table width='100%'> <tr><td id='td_ofc1' align='center'> <mce:script type='text/javascript'><!-- var so = new SWFObject('OpenFlashChart/open-flash-chart.swf', 'ofc', '500', '250', '9', '#FFFFFF'); so.addVariable('data', 'data/data1.txt'); so.write('td_ofc1'); // --></mce:script> </td></tr> <tr><td id='td_ofc2' align='center'> <mce:script type='text/javascript'><!-- var so = new SWFObject('OpenFlashChart/open-flash-chart.swf', 'ofc', '600', '200', '9', '#FFFFFF'); so.addVariable('data', 'data/data2.txt'); so.write('td_ofc2'); // --></mce:script> </td></tr> </table> </body> </html>
效果图
