OFC学习笔记（一） --- .Net WinForm环境下制作Open Flash Chart

最新推荐文章于 2024-05-27 18:07:34 发布

阿双2009

最新推荐文章于 2024-05-27 18:07:34 发布

阅读量4.7k

点赞数

分类专栏： Open Flash Chart 文章标签： winform flash .net webbrowser html 图表制作

本文链接：https://blog.csdn.net/luols/article/details/6186275

版权

Open Flash Chart 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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'></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'></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而已。本人也在学习中，大家若有好的建议欢迎探讨。。

阿双2009

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
7
评论
OFC学习笔记（一） --- .Net WinForm环境下制作Open Flash Chart

<br />Open Flash Chart是一个开源的Flash图表制作工具，基本都是在Web环境下进行制作，网上资料也相对较少，其官网http://teethgrinder.co.uk/open-flash-chart/提供的资料并没有在WinForm下操作，而且其数据文件大都是以php文件给出，与.Net相关例子并不多，因此这两天自己在WinForm下借助WebBrowser展现Flash Chart，赶紧记录下制作过程：<br />制作Open Flash Chart一般需要有两个文件：HTML页面
复制链接

扫一扫