介绍两款常用的“图表统计图"的插件

一、相信朋友们在开发的过程中都会使用到“数据统计”的功能，图表的统计更为直观，在这里就介绍两款插件：fusionChart、DataVisualization。

1、fusionChart实际项目中用的比较多，包括一些3D效果图（饼状、柱状、仪表板），先上效果图：

介绍两款常用的“图表统计图"的插件

2、实现上面的效果：

（1）、官网下载FusionCharts.js,或者下载我的源码，其中就有：FusionCharts.js、Pie3D.swf（3D饼状动画效果）、Pie2D.swf（2D饼状效果）、Column3D.swf（3D柱状图动画效果），其他的像仪表板、温度计、音乐播放器效果，点击这里下载官方Demo:

（2）、他需要的数据格式有两种：XML、JSON，先来演示使用XML格式的效果,继续使用MVC的方式。

1、首先添加FusionCharts.js。

2、添加一个DIV，作为显示的位置：<div ></div>。

3、JS渲染，其中：chart.setXMLUrl,使用的就是XML来作为数据源。

@{
    ViewBag.Title = "主页";
}
<script src="@Url.Content("~/Scripts/FusionCharts/FusionCharts.js")" type="text/javascript"></script>
<script type="text/javascript"> 
         $(function () {
             var chart = new FusionCharts("@Url.Content("~/Scripts/FusionCharts/Pie3D.swf")", "chart1", "800", "600", "0");
             chart.setXMLUrl("@Url.Content("~/StudentData.xml")"); 
             chart.render("divChart");
         });     
</script>

<div id="divChart"></div>

Index View