目前，在一些网站上，运用了动画的FLASH的图表，给网页增色不少。下面两张图就是&中国站长联盟&网站给注册用户统计网站访问量的图表的截图。
　　这种带有动画效果的图表，立马使得网页亲切起来。
　　在网上搜索一番后，发现它使用的是FusionCharts的Flash图表。
　　FusionCharts是InfoSoft Global公司的一个产品，InfoSoft Global 公司是专业的Flash图形方案提供商，他们还有几款其他的基于Flash技术的产品，都非常的漂亮。FusionCharts Free则是FusionCharts提供的一个免费版本，虽然免费，功能依然强大，图形类型依然丰富。
　　FusionCharts是用XML文件作为数据的载体。它从外部的XML文件获取数据，并根据数据显示动画图表。在XML中定义图表的各种属性，和图表的数据。在应用的时候，我们只要更改XML文件即可。
　　有关FusionCharts的图表的图形的基本元素，参看文章：。这里不再赘述。
　　下面，将详述其中的一个图表（2D Line）中的XML的属性说明。
　　2D Line的XML的属性，官方文章地址：
　　里面介绍了数十个属性，可是我们看看以下实例：　　
&graph caption='Monthly Sales Summary' 　　subcaption='For the year 2004' xAxisName='Month' 　　yAxisMinValue='15000' yAxisName='Sales' decimalPrecision='0' 　　formatNumberScale='0' numberPrefix='$' showNames='1' 　　showValues='0'
showAlternateHGridColor='1' 　　AlternateHGridColor='ff5904' divLineColor='ff5904' 　　divLineAlpha='20' alternateHGridAlpha='5' &
&set name='Jan' value='17400' hoverText='January'/&
&set name='Feb' value='19800' hoverText='February'/&
&set name='Mar' value='21800' hoverText='March'/&
&set name='Apr' value='23800' hoverText='April'/&
&set name='May' value='29600' hoverText='May'/&
&set name='Jun' value='27600' hoverText='June'/&
&set name='Jul' value='31800' hoverText='July'/&
&set name='Aug' value='39700' hoverText='August'/&
&set name='Sep' value='37800' hoverText='September'/&
&set name='Oct' value='21900' hoverText='October'/&
&set name='Nov' value='32900' hoverText='November' /&
&set name='Dec' value='39800' hoverText='December' /&&/graph&
　　通篇只有15个属性，远少于官方文章介绍的属性。是这样的，如果在XML中没有输入这个属性，FusionCharts的2D Line图表就会用一个默认值，而各个属性的默认值，没有介绍，笔者通过测试，逐步摸索出各个属性的默认值。贴在这儿和大家交流，其中难免有疏漏，欢迎指正。
　　bgColor：默认值ffffff。背景色，颜色采用6位16进制的字符表示，分别表示三个三色分量。　　bgAlpha：默认值100。背景Alpha，Alpha的取值范围是0&100。0是全透明，100是全不透明。　　bgSWF：默认值是空字符。背景SWF文件。
　　canvasBgColor：默认值ffffff。画布背景色。　　canvasBgAlpha：默认值100。画布背景Alpha。　　canvasBorderColor：默认值000000。画布边框色，默认是黑色。　　canvasBorderThickness：默认值2。画布边框宽度，0为表示不显示边框。
　　caption：默认值是空字符。图表的标题。　　subCaption：默认值是空字符。图表的子标题　　xAxisName：默认值是空字符。X轴文字　　yAxisName：默认值是空字符。Y轴文字　　yAxisMinValue：默认值是空字符。Y轴最小值。　　yAxisMaxValue：默认值是空字符。Y轴最大值。　　注：上面两个属性，如果用默认值的话，图表将采用数据，来计算Y轴的数值范围
　　shownames：默认值1。1表示显示点的名字，0表示不显示。　　showValues：默认值1。1表示显示点的数值，0表示不显示。　　showLimits：默认值1。1表示显示图表的数值的限制区间，0表示不显示。　　rotateNames：默认值0。0表示点的名字显示时不旋转，1表示显示时旋转一个角度。 　　animation：默认值1。1表示显示动画，0表示不显示。
　　lineColor：默认值f8671d。折线颜色，该颜色是偏向橘黄的一种颜色。　　lineThickness：默认值2。折线宽度。　　lineAlpha：默认值100。折线Alpha。
　　showShadow：默认值1。1表示显示折线阴影，0表示不显示。如果该属性为0，则下列shadow打头的属性都无效。 　　shadowColor：默认值cccccc。阴影颜色，一种灰色。　　shadowThickness：默认值2。阴影宽度。　　shadowAlpha：默认值100。阴影Alpha 。　　shadowXShift：默认值2。阴影水平位移，可以是负值。　　shadowYShift：默认值2。阴影垂直位移，可以是负值。
　　showAnchors：默认值1。1表示显示锚点，0表示不显示。如果该属性为0，则下列anchor打头的属性都无效。　　anchorSides：默认值是空字符。锚点的边数，默认值代表是圆形。可以取大于2的数值，3表示三角形，4表示正方形，依此类推。　　anchorRadius：默认值2。锚点的半径。　　anchorBorderColor：默认值f8671d。锚点的边框色。　　anchorBorderThickness：默认值2。锚点的边框宽度。　　anchorBgColor：默认值ffffff。锚点的背景色。　　anchorBgAlpha：默认值100。锚点的背景Alpha。　　anchorAlpha：默认值100。锚点的Alpha。　　注：anchorAlpha属性设为0时，也是不显示锚点，不过如果showhovercap为1时，鼠标移到点上时，还能看到提示文字。而showAnchors属性设为0时，虽然也不显示锚点，无论showhovercap取何值，鼠标移到点上时，是看不到提示文字。
　　baseFont：默认值Verdana。画布内的字体。　　baseFontSize：默认值7。画布内的字体大小。　　baseFontColor：默认值000000。画布内的字体颜色。　　outCnvBaseFont：默认值Verdana。画布外的字体　　outCnvBaseFontSze：默认值7。画布外的字体大小　　outCnvBaseFontColor：默认值000000。画布外的字体颜色
　　numberPrefix：默认值是空字符。数值的前缀字符，例如在表示金额的时候，可以用$符号。　　numberSuffix：默认值是空字符。数值的后缀字符，如果要使用后缀%，必须用%25标识。　　formatNumber：默认值1。1表示格式化显示数值，0表示正常显示数值。　　formatNumberScale：默认值1。1表示格式化数值，并作标记K、M。例如1000格式化为1K。0表示正常显示。　　decimalSeparator：默认值.。小数点的字符。　　thousandSeparator：默认值,。千位数的字符，只有formatNumber为1时才有效　　decimalPrecision：默认值2。数值的小数点的保留位数。　　divLineDecimalPrecision：默认值2。横线数值的小数点的保留位数。　　limitsDecimalPrecision：默认值2。限制数值区间的小数点的保留位数。
　　zeroPlaneThickness：默认值2。0轴的线的宽度。　　zeroPlaneColor：默认值cccccc。0轴的线的颜色　　zeroPlaneAlpha：默认值100。0轴的Alpha。　　注：如果图表中没有0轴，则上面三个关于0轴的属性无效。
　　numdivlines：默认值4。默认时图表的水平线有4根，将图表划分为5个水平块状。0表示没有水平线。　　divlinecolor：默认值cccccc。图表的水平线颜色。 　　divLineThickness：默认值1。图表的水平线宽度。 　　divLineAlpha：默认值100。图表的水平线的Alpha。 　　showDivLineValue：默认值1。1表示显示水平线对应的数值。0表示不显示。 　　showAlternateHGridColor：默认值0。1表示显示水平间隔，0表示不显示。 　　alternateHGridColor：默认值cccccc。水平间隔的颜色。　　alternateHGridAlpha：默认值70。水平间隔Alpha，注意，这个是70，不是100。　　注：以上三个属性使得图表显示垂直颜色交错的效果。如本文的第二个图例所示。
　　numVDivLines：默认值0。表示图表的垂直线的根数。0表示没有垂直线。　　VDivlinecolor：默认值cccccc。图表的垂直线颜色。　　VDivLineThickness：默认值1。图表的垂直线宽度。 　　VDivLineAlpha：默认值100。图表的垂直线的Alpha。　　showAlternateVGridColor：默认值0。1表示显示垂直间隔，0表示不显示。　　alternateVGridColor：默认值cccccc。垂直间隔的颜色。　　alternateVGridAlpha：默认值70。垂直间隔Alpha，注意，这个是70，不是100。
　　注：以上三个属性使得图表显示水平颜色交错的效果。垂直间隔的颜色显示在水平间隔的上方。
　　showhovercap：默认值1。1表示鼠标移到点上时显示提示文字，0表示不显示。 　　注：该属性生效还必须showAnchors为1。提示文字由三部分组成：点的hoverText、间隔符、点的数值。　　hoverCapBgColor：默认值f1f1f1。提示文字的背景颜色。 　　hoverCapBorderColor：默认值cccccc。提示文字的边框色。 　　hoverCapSepChar：默认值是,。间隔符的字符。
　　chartLeftMargin：默认值15。图表的左外边距。 　　chartRightMargin：默认值15。图表的右外边距。　　chartTopMargin：默认值15。图表的上外边距。 　　chartBottomMargin：默认值15。图表的下外边距。
　　以上属性在XML中都作为根节点graph的属性。
　　&set&作为根节点的子节点，表示图表中的一个数据点。他也有自己的属性。例如：
&set name="Jan" value="54" color="3300FF" hoverText="January" link="ShowDetails.asp%3FMonth=Jan" showName="1"/&
　　　　name：必有。该数据点的名字。　　　　value：必有。该书据点的数值。　　　　color：默认值是空字符串。表示这个数据点到下个数据点连线的颜色。默认用LineColor的值　　　　hoverText：默认值是空字符串。该数据点的提示文字。 　　　　alpha：默认值100。数据点Alpha。　　　　link：默认值是空字符串。该数据点的超链接　　　　showName：默认值1。1表示显示该数据点的名字，0表示不显示。　　　　注：shownames为0时，该属性为任何值都不会显示名字。shownames为1时，可以设置该属性为0，来限制某些数据点的显示名字。
&& 　　&trendLines&作为根节点的子节点，表示图表中的一系列趋势线。　　&line&作为&trendLines&的子节点，表示图表中的一条趋势线。（从实际来看，叫辅助线更适合）　　他也有自己的属性。例如：　　&
&line startValue='89.5' endValue='98' color='FF0000' displayvalue='Roll. Avg.' thickness='2' alpha='100' isTrendZone='0' showOnTop='1'/&
　　startValue：必有。该趋势线的起始数值。　　endValue：必有。该趋势线的结束数值。　　color：默认值000000。该趋势线的颜色 　　thickness：默认值1。该趋势线的宽度为1　　isTrendZone：默认值0。0表示趋势线是一条直线，1表示趋势线是一个矩形　　showOnTop：默认值0。0表示趋势线在折线的下方，1表示趋势线在折线的上方 　　alpha：趋势线的Alpha。这个属性和isTrendZone有关，isTrendZone为0时，该属性的默认值是100；isTrendZone为1时，该属性的默认值为40。&
　　以上是笔者通过测试，写下各个属性的默认值，如果有错误，欢迎各位指正。
阅读(...) 评论()C#在WinForm中使用WebKit传递js对象实现与网页交互的方法
作者：lyflcear
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了C#在WinForm中使用WebKit传递js对象实现与网页交互的方法,涉及针对WebBroswer控件及WebKit控件的相关使用技巧,需要的朋友可以参考下
本文实例讲述了C#在WinForm中使用WebKit传递js对象实现与网页交互的方法。分享给大家供大家参考，具体如下：
有个项目要使用WebBroswer控件，并且要能传递一个js对象供前台调用，用c#的WebBroswer控件很容易实现：
private void Form1_Load(object sender, EventArgs e)
WebBrowser wb = new WebBrowser();
wb.ObjectForScripting = new myClass();
要传递的js对象必须使用[ComVisibleAttribute]标记为COM 可见：
[System.VisibleAttribute(true)]
class myClass
public void Test()
System.Windows.Forms.MessageBox.Show("alert:Test");
这样前台就能使用window.external调用myClass的方法： window.external.Test();
如果就这样那就简单了 ,可偏偏项目使用的网站对IE的兼容性极差(吐槽下：个人觉得是IE太烂了，对标准的支持太差)，无奈之下想找寻其他类似的WebBrowser控件，发现几个不错的替换控件：
GeokoFx：一个Firefox的Geoko引擎的Windows Forms包装，google上的下载地址：/p/geckofx/ 官网：http://www.geckofx.org/
WebKit.NET:webkit的.NET封装，下载地址：http://sourceforge.net/projects/webkitdotnet/
本来决定使用GeokoFx，因为项目使用的网站用火狐打开是很快的，但是我找了几天资料也没发现怎么传递个js对象给控件，当发现Qt的webbroswer控件也是封装的WebKit控件时，遂决定使用WebKit，但WebKit.NET也没有直接提供传递对象的方法，后来发现又一个好东西：
open-webkit-sharp:对webkit.net的又一次封装，提供了很多新功能。google上下载地址：/p/open-webkit-sharp/
下面的使用就非常简单了，下载open-webkit-sharp后，把Core文件夹和References文件夹下所有文件拷贝到你的工程目录下，然后打开你的项目，添加引用OpenWebKitSharp.dll和WebKit.Interop.dll(如果你的项目运行在.NET Framework 2.0 或 3.5 引用 Binary_NET2文件夹下的这两个文件，NET4.0的话就引用Binary文件夹下的这两个dll)；然后就是工具箱-&选择项-&选择OpenWebKitSharp.dll，然后从工具箱中把WebKitBrowser拖到你的窗体上.现在已经成功了一大步了，但是为了避免使用时遇到各种错误，我们需要先安装两个支持文件：
Microsoft C++ 2005 Redistributable /download/en/details.aspx?id=26347Windows XP/Vista/7 32/64 Bit
Apple QuickTime (Optional - for better HTML5 Support)
Ready！开始传递对象：
private void Form1_Load(object sender, EventArgs e)
this.webKitBrowser1.Navigate("http://yourWebSiteUrl");
this.webKitBrowser1.DocumentCompleted += new WebBrowserDocumentCompletedEventHandler(webKitBrowser1_DocumentCompleted);
void webKitBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
this.webKitBrowser1.GetScriptManager.ScriptObject = new myClass();
前台调用方式类似IE的webbroswer，也使用window.external调用，你也可以自己定义一个对象：
代码如下:this.webKitBrowser1.GetScriptManager.EvaluateScript("var obj=window.");
这样调用的时候就能用你自己定义的对象名访问了。
应该也有直接自己定义对象的方法，但是open-webkit-sharp中文的资料实在的不多，耐着性子看了几天老外的论坛，一水的全是吐槽，实际解决问题的不多。等有更好的方法，也请大家不吝赐教。
更多关于C#相关内容感兴趣的读者可查看本站专题：《》、《》、《》及《》
希望本文所述对大家C#程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具周金桥 的BLOG
用户名：周金桥
文章数：240
评论数：863
访问量：2114941
注册日期：
阅读量：5863
阅读量：12276
阅读量：371396
阅读量：1065627
51CTO推荐博文
从事过ASP.NET开发的可能都会接触到一些图表控件，比如OWC、ZendGraph等等，这些控件都有一个特点，那就是我们可以像操作.NET中的对象一样控制它们的某些属性，有可能在本地开发好了上传到服务器端部署运行的时候会出现权限问题而导致不能正常运行。本篇周公讲述一个JavaScript的图表控件，不要小看了这个JavaScript图表控件，它能生成各种常见的图表。
&Highcharts是一个JavaScript的图表控件，它的官方网站网址是：，参考手册网址是：，示例网址是：。要想简单使用它的图表功能，只需要两个JS类库即可，一个是jquery的，另外一个就是它本身的。但是如果需要支持主题和导出图表功能，就需要更多的JS类库支持了。本篇只讲述满足大多数要求的基本功能。
&首先从下载最新版本的jQuery，然后从下载Highcharts的JavaScript类库。将这两个文件下载到本地的Web项目的JS文件下。
&因为Highcharts是根据js脚本中的属性设置来生成图表的，因为我们需要在ASP.NET中输出这些脚本。为了方便，周公将生成各种图表的核心逻辑部分抽取出来作为一个模板，需要的时候从这些模板中读取数据，然后将模板中的标签替换掉，这样就可以输出到客户端了。这些带有标签的JS模板位于js/template目录下。
&除了输出控制逻辑代码之外，还要在网页的ready客户端事件中调用，如下格式：
&$(document).ready(function() {//这里是逻辑和控制代码});
&为了便于演示，周公在创建ASP.NET页面的时候使用了单页模式，整个页面的代码如下：
%@&Page&Language=&C#&&%&%@&Import&Namespace=&System.Text&&%&%@&Import&Namespace=&System.IO&&%&&&!DOCTYPE&html&PUBLIC&&-//W3C//DTD&XHTML&1.0&Transitional//EN&&&http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&&&runat=&server&&&&&&public&string&result&=&string.E &&&&&protected&void&Page_Load(object&sender,&EventArgs&e) &&&&&{ &&&&&&&&&string&graphType&=&ddlGraphType.SelectedV &&&&&&&&& &&&&&&&&&graphTypegraphType&=&graphType.ToLower(); &&&&&&&&&switch&(graphType) &&&&&&&&&{ &&&&&&&&&&&&&case&&line&:&result=OutputLine();& &&&&&&&&&&&&&case&&spline&:&result&=&OutputSpline();& &&&&&&&&&&&&&case&&area&:&result&=&OutputArea();& &&&&&&&&&&&&&case&&areaspline&:&result&=&OutputAreaSpline();& &&&&&&&&&&&&&case&&column&:&result&=&OutputColumn();& &&&&&&&&&&&&&case&&bar&:&result&=&OutputBar();& &&&&&&&&&&&&&case&&pie&:&result&=&OutputPie();& &&&&&&&&&&&&&case&&scatter&:&result&=&OutputScatter();& &&&&&&&&&} &&&&&} &&&&&&private&string&OutputLine() &&&&&{ &&&&&&&&&string&result&=&string.E &&&&&&&&&using&(StreamReader&reader&=&new&StreamReader(Server.MapPath(&~/js/template/line.js&),&Encoding.UTF8)) &&&&&&&&&{ &&&&&&&&&&&&&StringBuilder&buffer&=&new&StringBuilder(reader.ReadToEnd()); &&&&&&&&&&&&&buffer.Replace(&{#title#}&,&&周公的演示例子&); &&&&&&&&&&&&&result&=&buffer.ToString(); &&&&&&&&&} &&&&&&&&&return& &&&&&} &&&&&&private&string&OutputSpline() &&&&&{ &&&&&&&&&string&result&=&string.E &&&&&&&&&using&(StreamReader&reader&=&new&StreamReader(Server.MapPath(&~/js/template/spline.js&),&Encoding.UTF8)) &&&&&&&&&{ &&&&&&&&&&&&&StringBuilder&buffer&=&new&StringBuilder(reader.ReadToEnd()); &&&&&&&&&&&&&buffer.Replace(&{#title#}&,&&周公的演示例子&); &&&&&&&&&&&&&result&=&buffer.ToString(); &&&&&&&&&} &&&&&&&&&return& &&&&&} &&&&&&private&string&OutputArea() &&&&&{ &&&&&&&&&string&result&=&string.E &&&&&&&&&using&(StreamReader&reader&=&new&StreamReader(Server.MapPath(&~/js/template/area.js&),&Encoding.UTF8)) &&&&&&&&&{ &&&&&&&&&&&&&StringBuilder&buffer&=&new&StringBuilder(reader.ReadToEnd()); &&&&&&&&&&&&&buffer.Replace(&{#title#}&,&&周公的演示例子&); &&&&&&&&&&&&&result&=&buffer.ToString(); &&&&&&&&&} &&&&&&&&&return& &&&&&} &&&&&&private&string&OutputAreaSpline() &&&&&{ &&&&&&&&&string&result&=&string.E &&&&&&&&&using&(StreamReader&reader&=&new&StreamReader(Server.MapPath(&~/js/template/areaspline.js&),&Encoding.UTF8)) &&&&&&&&&{ &&&&&&&&&&&&&StringBuilder&buffer&=&new&StringBuilder(reader.ReadToEnd()); &&&&&&&&&&&&&buffer.Replace(&{#title#}&,&&周公的演示例子&); &&&&&&&&&&&&&result&=&buffer.ToString(); &&&&&&&&&} &&&&&&&&&return& &&&&&} &&&&&&private&string&OutputColumn() &&&&&{ &&&&&&&&&string&result&=&string.E &&&&&&&&&using&(StreamReader&reader&=&new&StreamReader(Server.MapPath(&~/js/template/column.js&),&Encoding.UTF8)) &&&&&&&&&{ &&&&&&&&&&&&&StringBuilder&buffer&=&new&StringBuilder(reader.ReadToEnd()); &&&&&&&&&&&&&buffer.Replace(&{#title#}&,&&周公的演示例子&); &&&&&&&&&&&&&result&=&buffer.ToString(); &&&&&&&&&} &&&&&&&&&return& &&&&&} &&&&&&private&string&OutputBar() &&&&&{ &&&&&&&&&string&result&=&string.E &&&&&&&&&using&(StreamReader&reader&=&new&StreamReader(Server.MapPath(&~/js/template/bar.js&),&Encoding.UTF8)) &&&&&&&&&{ &&&&&&&&&&&&&StringBuilder&buffer&=&new&StringBuilder(reader.ReadToEnd()); &&&&&&&&&&&&&buffer.Replace(&{#title#}&,&&周公的演示例子&); &&&&&&&&&&&&&buffer.Replace(&{#subTitle#}&,&&扇形图表&); &&&&&&&&&&&&&//下面的数据应该是从数据库来，为了演示，这里直接上了 &&&&&&&&&&&&&string&data&=&&{name:&'1812年',data:&[107,&31,&635,&203,&2]},&{name:&'1912年',data:&[133,&156,&947,&408,&6]},&{name:&'2012年',data:&[973,&914,&,&34]}&; &&&&&&&&&&&&&buffer.Replace(&{#series#}&,&data); &&&&&&&&&&&&&result&=&buffer.ToString(); &&&&&&&&&} &&&&&&&&&return& &&&&&} &&&&&&private&string&OutputPie() &&&&&{ &&&&&&&&&string&result&=&string.E &&&&&&&&&using&(StreamReader&reader&=&new&StreamReader(Server.MapPath(&~/js/template/pie.js&),&Encoding.UTF8)) &&&&&&&&&{ &&&&&&&&&&&&&StringBuilder&buffer&=&new&StringBuilder(reader.ReadToEnd()); &&&&&&&&&&&&&buffer.Replace(&{#title#}&,&&周公的演示例子&); &&&&&&&&&&&&&result&=&buffer.ToString(); &&&&&&&&&} &&&&&&&&&return& &&&&&} &&&&&&private&string&OutputScatter() &&&&&{ &&&&&&&&&string&result&=&string.E &&&&&&&&&using&(StreamReader&reader&=&new&StreamReader(Server.MapPath(&~/js/template/scatter.js&),&Encoding.UTF8)) &&&&&&&&&{ &&&&&&&&&&&&&StringBuilder&buffer&=&new&StringBuilder(reader.ReadToEnd()); &&&&&&&&&&&&&buffer.Replace(&{#title#}&,&&周公的演示例子&); &&&&&&&&&&&&&result&=&buffer.ToString(); &&&&&&&&&} &&&&&&&&&return& &&&&&} &&&&xmlns=&http://www.w3.org/1999/xhtml&&&runat=&server&&&&&&Hign&Charts&实例&&src=&js/jquery-1.5.2.min.js&&type=&text/javascript&&&src=&js/highcharts.js&&type=&text/javascript&&&&&&&&&&id=&form1&&runat=&server&&&&&&&&&&&&border=&0&&width=&800&&&&&&请选择图表类型：&runat=&server&&ID=&ddlGraphType&& &&&&&&&&&&&&&AutoPostBack=&True&&&&&&&&&&line&&&&&&&&&spline&&&&&&&&&area&&&&&&&&&areaspline&&&&&&&&&column&&&&&&&&&bar&&&&&&&&&pie&&&&&&&&&scatter&&&&&&&&&&&&&&&id=&container&&style=&width:&800&height:&400&margin:&0&auto&&&&&&&&&&&&&&&& &&&&&&&&&&&type=&text/javascript&&&&&&&&&&var& &&&&&&&&&$(document).ready(function()&{ &%=result&%&&&&&&&&&&&&&}); &&&&&&&&&&&&&&&&& &&&&&&&&&&&&
&运行页面之后，效果如下：
&说明：1.在官方的实例中是采用了上的jQuery库，如果在不能联网的局域网中则不能正常运行，因为周公直接将jQuery类库下载到本地，这样就不需要联网也能运行了。2.在官方示例中，是直接在$(document).ready()这个方法中将全部逻辑放在这个方法中，在实际开发中可能有大量的逻辑需要判断和处理，所以在这个例子中采用模板替换的方式。
&本文出自 “” 博客，请务必保留此出处
了这篇文章
附件下载：　　
类别：┆阅读(0)┆评论(0)
17:36:05 10:44:22 22:59:40 01:11:27 16:56:58 14:20:42 18:14:55 23:19:44
请输入验证码：3679人阅读
& & & &目前网上有很多插件来完成图表的制作，但是大部分都是以JS插件的显示实现的，虽然在winform也有MS-chart工具，它功能也是相当的强大，但是随着JS个快速发展，我们就希望能够将html引入winform程序中，在html中使用引用JS插件，通过html展现图表。
现在网上有很多的JS插件完成图表制作，如，, &&&等等，这里我们使用的是另外一个插件.我们可以自行去相关官方网站学习在html中如何使用这些插件。
下来我们主要介绍的是在winform中内使用html以及二者之间的相互调用。一般在winform中有两种方法完成，一个是通过SWF，一个是通过webBrowser。在这里我们是通过webBrowser实现，它是winform中提供的一个工具。我们在可以直接将该工具拖到窗体上即可，如下：
上图中空白处就是webBrowser控件。上方的是5个winform按钮，我们在winform中实现按钮的单击事件，在实现的过程中调用html中JS函数，通过JS 方法来改变html的内容，最终呈现在form窗体中。
首先我们要在项目中添加一个html文件，在这个文件中引用相应的JS插件。我的html文件如下：
&!DOCTYPE HTML PUBLIC &-//W3C//DTD HTML 4.0 Transitional//EN&&
&title&AnalysisChart&/title&
&!--[if lte IE 8]&&script language=&javascript& type=&text/javascript& src=&excanvas.min.js&&&/script&&![endif]--&
&script language=&javascript& type=&text/javascript& src=&jquery.js&&&/script&
&script language=&javascript& type=&text/javascript& src=&jquery.flot.js&&&/script&
&script language=&javascript& type=&text/javascript& src=&jquery.flot.pie.js&&&/script&
&script language=&javascript& type=&text/javascript& src=&jquery.flot.categories.js&&&/script&
&script language=&javascript& type=&text/javascript& src=&jquery.flot.crosshair.js&&&/script&
&script type=&text/javascript&&
var opentimer =
//设置webBrowser的大小
function IniteContainer(wd, hg) {
alert(wd+hg);
$(&#placeholder&).css(&height&, hg).css(&width&, wd);
function viewChart(dd2) {
var d1 = [];
for (var i = 0; i & 14; i += 0.5) {
d1.push([i, Math.sin(i)]);
var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
var d2 = $.parseJSON(dd2); //jquery.parseJSON()方法解析json序列化数据
alert(d2);
var d3 = [];
for (var i = 0; i & 14; i += 0.5) {
d3.push([i, Math.cos(i)]);
var d4 = [];
for (var i = 0; i & 14; i += 0.1) {
d4.push([i, Math.sqrt(i * 10)]);
var d5 = [];
for (var i = 0; i & 14; i += 0.5) {
d5.push([i, Math.sqrt(i)]);
var d6 = [];
for (var i = 0; i & 14; i += 0.5 + Math.random()) {
d6.push([i, Math.sqrt(2 * i + Math.sin(i) + 5)]);
$.plot(&#placeholder&, [{
//经过json解析的数据是一个数组，可以直接赋值
lines: { show: true, fill: true }
bars: { show: true }
points: { show: true }
lines: { show: true }
lines: { show: true },
points: { show: true }
lines: { show: true, steps: true }
function Pie(pieData) {
alert(pieData);
if (opentimer) {
clearTimeout(timeout);
opentimer =
var dataRec = $.parseJSON(pieData);
$(&#placeholder&).unbind();
$.plot(&#placeholder&, dataRec, {
show: true,
radius: 1,
show: true,
radius: 3 / 4,
formatter: labelFormatter,
background: {
opacity: 0.5,
color: '#000'
show: false
function labelFormatter(label, series) {
return &&div style='font-size:8 text-align: padding:2 color:'&& + label + &&br/&& + Math.round(series.percent) + &%&/div&&;
//动态显示曲线
var upInterval = 40;
function wave(internal) {
if (opentimer) {
clearTimeout(timeout);
opentimer =
var path = window.external.WaveData('hell world');
var data = $.parseJSON(path);
alert(data);
upInterval =
plot = $.plot(&#placeholder&, [data], {
//注意：虽然经过解析后是一个数组对象，但是此处还是需要添加“[]”
shadowSize: 0
show: false
function update() {
var path = window.external.WaveData('hell world');
var data = $.parseJSON(path);
plot.setData([data]);
plot.draw();
opentimer =
timeout = setTimeout(update, upInterval);
function Bar(barData) {
if (opentimer) {
clearTimeout(timeout);
opentimer =
alert(barData);
var barRec = $.parseJSON(barData);
alert(barRec);
$(&#placeholder&).unbind();
$.plot(&#placeholder&, [barRec], {
show: true,
barWidth: 0.6,
align: &center&
mode: &categories&,
//必须引用jquery.flot.categories.js
tickLength: 0
function stacking(dataone, datatwo, datathr) {
if (opentimer) {
clearTimeout(timeout);
opentimer =
var dtOne = $.parseJSON(dataone);
var dttwo = $.parseJSON(datatwo);
var dtthr = $.parseJSON(datathr);
$(&#placeholder&).unbind();
$.plot(&#placeholder&, [dtOne, dttwo, dtthr], {
stack: true,
show: false,
fill: true,
steps: false
show: true,
barWidth: 0.6
//实时显示曲线值
function Tracking(dataSin, dataCos) {
var dtsin = $.parseJSON(dataSin);
var dtcos = $.parseJSON(dataCos);
plot = $.plot(&#placeholder&, [
{ data: dtsin, label: &sin(x) = -0.00& },
{ data: dtcos, label: &cos(x) = -0.00& }
show: true
crosshair: {
hoverable: true,
autoHighlight: false
min: -1.2,
var legends = $(&#placeholder .legendLabel&);
legends.each(function () {
// fix the widths so they don't jump around
$(this).css('width', $(this).width());
var updateLegendTimeout =
var latestPosition =
function updateLegend() {
updateLegendTimeout =
var pos = latestP
var axes = plot.getAxes();
if (pos.x & axes.xaxis.min || pos.x & axes.xaxis.max ||
pos.y & axes.yaxis.min || pos.y & axes.yaxis.max) {
var i, j, dataset = plot.getData();
for (i = 0; i & dataset. ++i) {
var series = dataset[i];
// Find the nearest points, x-wise
for (j = 0; j & series.data. ++j) {
if (series.data[j][0] & pos.x) {
// Now Interpolate
p1 = series.data[j - 1],
p2 = series.data[j];
if (p1 == null) {
y = p2[1];
} else if (p2 == null) {
y = p1[1];
y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
legends.eq(i).text(series.label.replace(/=.*/, &= & + y.toFixed(2)));
$(&#placeholder&).bind(&plothover&, function (event, pos, item) {
latestPosition =
if (!updateLegendTimeout) {
updateLegendTimeout = setTimeout(updateLegend, 50);
&div id=&content&&
&div class=&demo-container&&
&div id=&placeholder& class=&demo-placeholder& style=&height: 100&&
以上已经准备好了html文件，接下来看看怎么在winform中的单击事件中调用对应的js，以及从winform传递参数到JS和从JS传递参数到winform的函数中。
从winform到JS
& & & 在winform中调用JS，首先要在winform中添加如下语句，来使得winform可以和html相互交互。
在form中需要注意的是，我们在html中并没有设置图标绘制的DIV的大小，因此在我们需要在加载完成html之后调用JS函数，完成设置容器的大小。我们在winform中获取获取webBrowser的大小，然后传递到JS中，我们如可完成调用JS的函数呢？主要是通过webBrowser提供的调用，如下：
webBrowser.Document.InvokeScript(&IniteContainer&, new object[] { this.webBrowser.Width - 50, this.webBrowser.Height - 50 });
注：上述函数的添加是在webBrowser的
DocumentCompleted（object sender, WebBrowserDocumentCompletedEventArgs e）事件中完成的。另外还需要添加如下的代码，使得JS可以访问form：
webBrowser.ObjectForScripting =
//使得js可以访问form中的方法
其中，第一个参数是JS函数的名称，第二参数是传递的参数值，参数的类型是object，在JS中接收到这个参数，根据需要决定是否进行相应的转换或者解析等等。下面是InitContainer的实现：
function IniteContainer(wd, hg) {
alert(wd+hg);
$(&#placeholder&).css(&height&, hg).css(&width&, wd);
& & & &使用同样的方法，将在winform中获取的数据转换为JSON格式，当做JS的参数传递给JS。这里的数据可以是我们从数据库中获取的，也可以是XML文件中的数据，也可以是其他形式的数据，最终封装序列化为JSON格式的数据，这里我使用的是Newtonsoft工具进行JSON格式数据的转换，在html中通过JQuery提供的parseJSON方法来解析。在form中的数据必须是数组形式的，这是因为FLot图表插件要求的。下面的是form的一个按钮的单击事件：
private void btPie_Click(object sender, EventArgs e)
List&FlotData& piedata = new List&FlotData&();
piedata.Add(new FlotData() { label = &serials 1&, data = new object[] { new object[] { 1, 10 } } });
piedata.Add(new FlotData() { label = &serials 2&, data = new object[] { new object[] { 1, 20 } } });
piedata.Add(new FlotData() { label = &serials 3&, data = new object[] { new object[] { 1, 15 } } });
piedata.Add(new FlotData() { label = &serials 4&, data = new object[] { new object[] { 1, 50 } } });
webBrowser.Document.InvokeScript(&Pie&, new object[] { JsonConvert.SerializeObject(piedata) });
下面是另外一个实现：
private void btBar_Click(object sender, EventArgs e)
List&object[]& lsBar = new List&object[]&();
lsBar.Add(new object[] { &January&,10});
lsBar.Add(new object[] { &February&, 10 });
lsBar.Add(new object[] { &March&, 10 });
lsBar.Add(new object[] { &April&, 10 });
lsBar.Add(new object[] { &May&, 17 });
lsBar.Add(new object[] { &Jun&, 9 });
string tt = JsonConvert.SerializeObject(lsBar);
webBrowser.Document.InvokeScript(&Bar&, new object[] { tt });
从JS到winform
在JS中调用form中函数，目前还没有研究怎么在JS中调用form中的事件，这里只是调用form自定义的函数。我们想实现下面这样的功能：当在form中单击一个按钮产生click事件后，调用html中的JS完成实时动态的显示，类似于医院的心电图等，但是这个数据是在winform中产生的。也就是说我们要在html启动一个定时器，在一定间隔后调用form中函数获取数据，然后更新JS绘图容器的数据源重新进行绘制。
在JS中是怎么调用winform中的函数呢？主要是通过JS提供的对象window.external.**实现的其中“**”就是我们在winform总定义的函数，也包括函数，如下就是在html的JS调用winform的自定义函数：
下面是在form中定义的函数的代码：
public string WaveData(string mes)
int divWidth = this.webBrowser.Width - 10;
int divHeight = this.webBrowser.Height - 10;
List&object[]& lsData = new List&object[]&();
Random rd=new Random();
for (int i = 0; i & divWi++ )
lsData.Add(new object[] { i, rd.Next(0, divHeight) });
return JsonConvert.SerializeObject(lsData);
关于在form中如何经行实时显示的，可以到官方网站看相关的例子。
下面是程序运行的截图：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：184683次
积分：2055
积分：2055
排名：第14952名
原创：29篇
转载：33篇
评论：63条
(1)(1)(1)(1)(2)(1)(1)(3)(2)(2)(3)(2)(6)(1)(3)(3)(1)(7)(6)(2)(5)(7)(1)