visifire的应用

先来看一下visifire的英文介绍吧

Visifire is a set of data visualization components - powered by Microsoft

Silverlight

&

WPF. Visifire is a multi-targeTing control which can be used in both WPF & Silverlight applications. Using the same API,charts / gauges in Mobile,Web and Desktop environments can be created within minutes. It can also be embedded in any web page as a standalone Silverlight App. Visifire is independent of server side technology. It can be used with ASP,ASP.Net,PHP,JSP,ColdFusion,Python,Ruby or just simple HTMl. Don't take our word for it! Visit Visifire Gallery or design your own chart or gauge using Designer.

一长串的英文，无非就说明了visifire是一组数据的可视化表现，也就是图标表现形式。所以用visifire可以有效，靓丽的采用图形化的方式来表现数据。它作为一个组件，可以用在很多技术和语言上面，如SP,Ruby ，甚至是简单的 HTML。所以visifire用起来很方便，很广泛

下面在html中举一个例子

代码如下

<mce:script type="text/javascript" src="visifire/Visifire.js" mce_src="visifire/Visifire.js"></mce:script> <div id="VisifireChart0" > <mce:script type="text/javascript"><!-- // Create Visifire ob<a href="http://code.js-code.com/tag/je/" target="_blank" class="keywords">je</a>ct var vChart = new Visifire('visifire/S<a href="http://code.js-code.com/tag/l/" target="_blank" class="keywords">l.</a>Visifire.Chart<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>xap',"MyChart",650,500<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> // vChart1.setLogLevel(0<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> // If <a href="http://code.js-code.com/tag/youw/" target="_blank" class="keywords">you w</a>ant to disable logging. // Chart Style XML var styleXml = '<Canva<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a><a href="http://code.js-code.com/tag/resourc/" target="_blank" class="keywords">resourc</a>es>' + ' <Style x:Key="<a href="http://code.js-code.com/tag/titl/" target="_blank" class="keywords">titl</a>eStyle" TargetType="vc@R_44_<a href="http://code.js-code.com/tag/696/" target="_blank" class="keywords">696</a>4@">' + ' <Setter Property="FontColor" Value="Red"></Setter>' + ' </Style>' + ' <Style x:Key="ChartStyle" TargetType="vc:Chart">' + ' <Setter Property="<a href="http://code.js-code.com/tag/BAC/" target="_blank" class="keywords">BAC</a>kground" Value="#dbdbdb"></Setter>' + ' <Setter Property="Bevel" Value="True"></Setter>' + ' <Setter Property="BorderBrush" Value="Black"></Setter>' + ' </Style>' + '</Canva<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a><a href="http://code.js-code.com/tag/resourc/" target="_blank" class="keywords">resourc</a>es>'; // Chart XML var chartXml = styleXml + '<vc:Chart Style="<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a>Static<a href="http://code.js-code.com/tag/resourc/" target="_blank" class="keywords">resourc</a>e ChartStyl<a href="http://code.js-code.com/tag/E/" target="_blank" class="keywords">E}</a>" mce_Style="<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a>Static<a href="http://code.js-code.com/tag/resourc/" target="_blank" class="keywords">resourc</a>e ChartStyl<a href="http://code.js-code.com/tag/E/" target="_blank" class="keywords">E}</a>" xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts" Width="650" Height="500" Theme="Theme1" AnimationEnabled="True" BorderThick<a href="http://code.js-code.com/tag/nes/" target="_blank" class="keywords">nes</a>s="2" View3D="<a href="http://code.js-code.com/tag/fal/" target="_blank" class="keywords">fal</a>se">' + ' <vc:Chart.<a href="http://code.js-code.com/tag/titl/" target="_blank" class="keywords">titl</a>es>' + ' <vc@R_44_<a href="http://code.js-code.com/tag/696/" target="_blank" class="keywords">696</a>4@ Style="<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a>Static<a href="http://code.js-code.com/tag/resourc/" target="_blank" class="keywords">resourc</a>e <a href="http://code.js-code.com/tag/titl/" target="_blank" class="keywords">titl</a>eStyl<a href="http://code.js-code.com/tag/E/" target="_blank" class="keywords">E}</a>" mce_Style="<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a>Static<a href="http://code.js-code.com/tag/resourc/" target="_blank" class="keywords">resourc</a>e <a href="http://code.js-code.com/tag/titl/" target="_blank" class="keywords">titl</a>eStyl<a href="http://code.js-code.com/tag/E/" target="_blank" class="keywords">E}</a>" Text="周销量图" FontSize="14"/>' + ' </vc:Chart.<a href="http://code.js-code.com/tag/titl/" target="_blank" class="keywords">titl</a>es>' + ' <vc:Chart.Series>' + ' <vc:DataSeries RenderAs="Line" Le<a href="http://code.js-code.com/tag/gend/" target="_blank" class="keywords">gend</a>Text="菜品一" LabelEnabled="True">' + ' <vc:DataSerie<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>DataPoints>' + ' <vc:DataPo<a href="http://code.js-code.com/tag/inta/" target="_blank" class="keywords">int a</a>xisXLabel="星期一" YValue="3"/>' + ' <vc:DataPo<a href="http://code.js-code.com/tag/inta/" target="_blank" class="keywords">int a</a>xisXLabel="星期二" YValue="28"/>' + ' <vc:DataPo<a href="http://code.js-code.com/tag/inta/" target="_blank" class="keywords">int a</a>xisXLabel="星期三" YValue="27"/>' + ' <vc:DataPo<a href="http://code.js-code.com/tag/inta/" target="_blank" class="keywords">int a</a>xisXLabel="星期四" YValue="17.9"/>' + ' <vc:DataPo<a href="http://code.js-code.com/tag/inta/" target="_blank" class="keywords">int a</a>xisXLabel="星期五" YValue="20"/>' + ' </vc:DataSerie<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>DataPoints>' + ' </vc:DataSeries>' + ' <vc:DataSeries RenderAs="Line" Le<a href="http://code.js-code.com/tag/gend/" target="_blank" class="keywords">gend</a>Text="菜品二" LabelEnabled="True">' + ' <vc:DataSerie<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>DataPoints>' + ' <vc:DataPo<a href="http://code.js-code.com/tag/inta/" target="_blank" class="keywords">int a</a>xisXLabel="星期一" YValue="40"/>' + ' <vc:DataPo<a href="http://code.js-code.com/tag/inta/" target="_blank" class="keywords">int a</a>xisXLabel="星期二" YValue="25"/>' + ' <vc:DataPo<a href="http://code.js-code.com/tag/inta/" target="_blank" class="keywords">int a</a>xisXLabel="星期三" YValue="23"/>' + ' <vc:DataPo<a href="http://code.js-code.com/tag/inta/" target="_blank" class="keywords">int a</a>xisXLabel="星期四" YValue="27"/>' + ' <vc:DataPo<a href="http://code.js-code.com/tag/inta/" target="_blank" class="keywords">int a</a>xisXLabel="星期五" YValue="29"/>' + ' </vc:DataSerie<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>DataPoints>' + ' </vc:DataSeries>' + ' <vc:DataSeries RenderAs="Line" Le<a href="http://code.js-code.com/tag/gend/" target="_blank" class="keywords">gend</a>Text="菜品三" LabelEnabled="True">' + ' <vc:DataSerie<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>DataPoints>' + ' <vc:DataPo<a href="http://code.js-code.com/tag/inta/" target="_blank" class="keywords">int a</a>xisXLabel="星期一" YValue="30"/>' + ' <vc:DataPo<a href="http://code.js-code.com/tag/inta/" target="_blank" class="keywords">int a</a>xisXLabel="星期二" YValue="18"/>' + ' <vc:DataPo<a href="http://code.js-code.com/tag/inta/" target="_blank" class="keywords">int a</a>xisXLabel="星期三" YValue="37"/>' + ' <vc:DataPo<a href="http://code.js-code.com/tag/inta/" target="_blank" class="keywords">int a</a>xisXLabel="星期四" YValue="27"/>' + ' <vc:DataPo<a href="http://code.js-code.com/tag/inta/" target="_blank" class="keywords">int a</a>xisXLabel="星期五" YValue="21"/>' + ' </vc:DataSerie<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>DataPoints>' + ' </vc:DataSeries>' + ' <vc:DataSeries RenderAs="Line" Le<a href="http://code.js-code.com/tag/gend/" target="_blank" class="keywords">gend</a>Text="菜品四" LabelEnabled="True">' + ' <vc:DataSerie<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>DataPoints>' + ' <vc:DataPo<a href="http://code.js-code.com/tag/inta/" target="_blank" class="keywords">int a</a>xisXLabel="星期一" YValue="30"/>' + ' <vc:DataPo<a href="http://code.js-code.com/tag/inta/" target="_blank" class="keywords">int a</a>xisXLabel="星期二" YValue="18"/>' + ' <vc:DataPo<a href="http://code.js-code.com/tag/inta/" target="_blank" class="keywords">int a</a>xisXLabel="星期三" YValue="37"/>' + ' <vc:DataPo<a href="http://code.js-code.com/tag/inta/" target="_blank" class="keywords">int a</a>xisXLabel="星期四" YValue="27"/>' + ' <vc:DataPo<a href="http://code.js-code.com/tag/inta/" target="_blank" class="keywords">int a</a>xisXLabel="星期五" YValue="21"/>' + ' </vc:DataSerie<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>DataPoints>' + ' </vc:DataSeries>' + ' <vc:DataSeries RenderAs="Line" Le<a href="http://code.js-code.com/tag/gend/" target="_blank" class="keywords">gend</a>Text="菜品五" LabelEnabled="True">' + ' <vc:DataSerie<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>DataPoints>' + ' <vc:DataPo<a href="http://code.js-code.com/tag/inta/" target="_blank" class="keywords">int a</a>xisXLabel="星期一" YValue="90"/>' + ' <vc:DataPo<a href="http://code.js-code.com/tag/inta/" target="_blank" class="keywords">int a</a>xisXLabel="星期二" YValue="65"/>' + ' <vc:DataPo<a href="http://code.js-code.com/tag/inta/" target="_blank" class="keywords">int a</a>xisXLabel="星期三" YValue="55"/>' + ' <vc:DataPo<a href="http://code.js-code.com/tag/inta/" target="_blank" class="keywords">int a</a>xisXLabel="星期四" YValue="37"/>' + ' <vc:DataPo<a href="http://code.js-code.com/tag/inta/" target="_blank" class="keywords">int a</a>xisXLabel="星期五" YValue="29"/>' + ' </vc:DataSerie<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>DataPoints>' + ' </vc:DataSeries>' + ' <vc:DataSeries RenderAs="Line" Le<a href="http://code.js-code.com/tag/gend/" target="_blank" class="keywords">gend</a>Text="菜品六" LabelEnabled="True">' + ' <vc:DataSerie<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>DataPoints>' + ' <vc:DataPo<a href="http://code.js-code.com/tag/inta/" target="_blank" class="keywords">int a</a>xisXLabel="星期一" YValue="38"/>' + ' <vc:DataPo<a href="http://code.js-code.com/tag/inta/" target="_blank" class="keywords">int a</a>xisXLabel="星期二" YValue="88"/>' + ' <vc:DataPo<a href="http://code.js-code.com/tag/inta/" target="_blank" class="keywords">int a</a>xisXLabel="星期三" YValue="47"/>' + ' <vc:DataPo<a href="http://code.js-code.com/tag/inta/" target="_blank" class="keywords">int a</a>xisXLabel="星期四" YValue="67"/>' + ' <vc:DataPo<a href="http://code.js-code.com/tag/inta/" target="_blank" class="keywords">int a</a>xisXLabel="星期五" YValue="25"/>' + ' </vc:DataSerie<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>DataPoints>' + ' </vc:DataSeries>' + ' </vc:Chart.Series>' + ' </vc:Chart>'; // Set Chart XML vChart.set@L_629_8<a href="http://code.js-code.com/tag/m/" target="_blank" class="keywords">@m</a>l(chartXml<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> // Render chart vChart.render("VisifireChart0"<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> // --></mce:script> </div> 

相信这段代码很容易看懂吧，要注意的有两点

（一） 必须引入 visifire.js文件

（二）注意id="VisifireChart0"和"vChart.render("VisifireChart0");"的对应关系，其他的就是标准的visifire的配置了

效果图如下

呵呵，是不是很简单。图表很炫吧，尽情的用吧！

备注：若你的图表上显示“You need Microsoft Silverlight to view Visifire Charts.

You can install it by clicking on this link.

Please restart the browser after installation.”，那么你就装一个Silverlight吧

想了解更多关于visifire的信息，请访问 http://www.visifire.com/