zoukankan      html  css  js  c++  java
  • 在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="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的效果:

      

      

  • 相关阅读:
    重构drf后的环境变量配置
    分离的前后台交互
    虚拟环境的搭建
    Python
    Python
    Python
    Python操作MongoDb数据库
    Python操作SQLite/MySQL/LMDB
    数据库-如何创建SQL Server身份验证用户
    Python
  • 原文地址:https://www.cnblogs.com/grenet/p/1698874.html
Copyright © 2011-2022 走看看