在winform中运用FusionCharts图表（二）

最新推荐文章于 2025-06-04 14:30:42 发布

狼王_

最新推荐文章于 2025-06-04 14:30:42 发布

阅读量1.1k

点赞数

分类专栏： C#编程

C#编程专栏收录该内容

55 篇文章

订阅专栏

本文介绍在WinForm中使用FusionCharts显示动态图表的方法。通过WebBrowser控件加载包含SWF文件的HTML页面实现图表展示，并可通过按钮切换不同数据源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在上文“ 在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的效果：

点击Button2的效果：