在winform中运用FusionCharts图表(二)

简介:

在上文“在winform中运用FusionCharts图表(一)”中,介绍了Line2D的FusionCharts图表的XML基本属性。

  本文将介绍如何在WinForm中显示图表,并且通过按钮点击显示不同的图表。

  在WinForm中显示SWF文件,有两种途径,一个是利用Flash控件;一个是利用WebBrowser控件;本文利用的是后者。WebBrowser控件通过显示包含SWF文件的HTML文件,来达到显示SWF文件的目的。

  首先,准备好外部文件:

    FusionCharts.js;这个是FusionCharts的JS文件。在官方的免费包里。

    FCF_Line.swf;这个是FusionCharts的SWF文件,用来显示图表的,在官方的免费包里。

    1.xml;图表数据一,自己构造的XML图表数据。

    2.xml;图表数据二,自己构造的XML图表数据,和前一个文件属性相同,只是数据点的数据不同。

    Line2D.html;包含SWF文件的HTML文件。内容如下:    

复制代码
 
 
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=iso-8859-1" />
< title > FusionCharts Free Documentation </ title >
< script language ="JavaScript" src ="FusionCharts.js" ></ script >

< script language ="javascript" >
var query = location.search.substring( 5 );
</ script >

</ head >

< body style ="margin:0px;" >

< div style ="width:600px;" >
< div id ="chartdiv" align ="center" >
FusionCharts.
</ div >
< script type ="text/javascript" >
var chart = new FusionCharts( " FCF_Line.swf " , " ChartId " , " 600 " , " 350 " );
chart.setDataURL(query);
chart.render(
" chartdiv " );
</ script >
</ div >
</ body >
</ html >
复制代码

 

   这个文件的关键有这几个方面:

  1、var query=location.search.substring(5);。这句话是JS来获取HTML的传入参数。在使用的时候,WebBrowse控件是采用Line2D.html?url=2.xml的形式,那么前面的这句话就是获得2.xml这个外部数据文件名。

  2、<body style="margin:0px;">。这句话是把页面的留白去掉。

  3、chart.setDataURL(query); 。这句话的意思是根据前面获得的文件名,动态的获得数据。

  

  文件准备好后,在Winform上拖动控件,两个Button,一个WebBrowse控件。

  WebBrowse控件的属性设置如下:

    IsWebBrowserContextMenuEnabled = False;不显示WebBrowser的上下文菜单

    Width = 600

    Height = 350

    ScrollBarsEnabled = False;不显示滚动条

    WebBrowserShortcutsEnabled = False;不显示WebBrowser的快捷菜单。

  在Form的Actived的事件中,添加如下代码,默认显示第一个图表

    WebBrowser1.Navigate(Application.StartupPath & "\Line2D.html?url=1.xml")

  在Button1的Click事件中,添加如下代码,显示第一个图表

    WebBrowser1.Navigate(Application.StartupPath & "\Line2D.html?url=1.xml")

  在Button2的Click事件中,添加如下代码,显示第二个图表

    WebBrowser1.Navigate(Application.StartupPath & "\Line2D.html?url=2.xml")

  至此,效果完成。下面是两个效果图。

  点击Button1的效果:

2010032815273422.jpg

  点击Button2的效果:

2010032815275340.jpg

  



      本文转自万仓一黍博客园博客,原文链接:http://www.cnblogs.com/grenet/archive/2010/03/28/1698874.html,如需转载请自行联系原作者

相关文章
|
C# 容器
Winform控件优化之TabControl控件的美化和功能扩展
在基本的TabControl控件使用和功能之上,可以尝试对其进行美化和功能扩展,比如动态删除或添加tab、绘制图标按钮及鼠标hover时的背景变化、Tab从右向左布局的优化处理等。最重要...
2056 0
Winform控件优化之TabControl控件的美化和功能扩展
|
10天前
|
C# 开发者 C++
一套开源、强大且美观的WPF UI控件库
一套开源、强大且美观的WPF UI控件库
127 0
|
11月前
|
数据安全/隐私保护
ApeForms | WinForm窗体UI美化库(Metro扁平风格)演示与安装
ApeForms是一套基于WinForm框架免费的UI库,提供了丰富的Metro风格控件、针对WinForm开发中常见类型的扩展、通用Dialog/Notification的模板等。
298 0
ApeForms | WinForm窗体UI美化库(Metro扁平风格)演示与安装
|
Web App开发 数据可视化 前端开发
WPF调用 ECharts 显示图表
WPF调用 ECharts 显示图表
WPF调用 ECharts 显示图表
|
前端开发 C# 开发工具
WPF 自定义柱状图 BarChart
原文:WPF 自定义柱状图 BarChart WPF 自定义柱状图  当前的Telerik控件、DevExpress控件在图表控件方面做得不错,但是有时项目中需要特定的样式,不是只通过修改图表的模板和样式就能实现的。
1067 0
|
前端开发 C#
WPF 自定义的图表(适用大量数据绘制)下
原文:WPF 自定义的图表(适用大量数据绘制)下 上一篇文章中讲了WPF中自定义绘制大量数据的图标,思路是先将其绘制在内存,然后一次性加载到界面,在后续的调试过程中,发现当数据量到达10W时,移动鼠标显示数据有明显的延迟。
1393 0
|
C# 前端开发
WPF 自定义的图表(适用大量数据绘制)
原文:WPF 自定义的图表(适用大量数据绘制) 在WPF中绘制图表比较简单,有很多的第三方控件,但是在绘制大量数据的时候,就显得有些吃力,即便是自己用StreamGeometry画也达不到理想的效果,要达到绘制大量数据而不会顿卡现象,只有一个途径,就是首先在内存中绘制好所有的图形,再一次性加载(或者说绘制)到界面控件Canvas或Grid中。
1146 0
|
C#
WPF 控件库——轮播控件
原文:WPF 控件库——轮播控件 一、要做成什么样   bs端的轮播控件千千万,有的甚至能作为一个单独的库来开发,所涉及到的功能也是缤纷多彩。相对来说,cs端的轮播用得不多,我这里只是简单的做了个能满足一般需求的轮播,在项目中凑会凑会还是可以的。
1796 0