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

一、相信朋友们在开发的过程中都会使用到“数据统计”的功能，图表的统计更为直观，在这里就介绍两款插件：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，作为显示的位置：

。

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

                 

@{
    ViewBag.Title = "主页";
}



"divChart">

Index View

                         4、XML数据格式如下：                               

                 

"1.0" encoding="utf-8" ?>
      "全校年龄分布图" subCaption="年龄"
        showBorder="1" startingAngle="70" bgAngle="360" bgRatio="0,100" bgColor="99ccff,ffffff"
        enableRotation="1" enableSmartLabels="1" decimals="0" palette="3"
        formatNumberScale="0" XAxisName="横坐标" YAxisName="纵坐标">
    
      <set label="年龄在20~24之间" value="750"  isSliced="1"/>
      <set label="年龄在15~20之间" value="1420"  isSliced="1"/>
      <set label="年龄在11~15之间" value="1120"  isSliced="0"/>
      <set label="年龄在8~11之间" value="5846"  isSliced="0"/>
      <set label="年龄在5~8之间" value="1245"  isSliced="0"/>
      <set label="年龄在3~5之间" value="521"  isSliced="0" displayValue="我是幼儿园的学生"/>