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

- 日理万妓 2021-11-22 06:01 557阅读 0赞

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

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

![SouthEast][]

![SouthEast 1][]

![SouthEast 2][]

2、实现上面的效果：

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

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

1、首先添加FusionCharts.js。

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

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

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

@{
        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

4、XML数据格式如下：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<?xml version="1.0" encoding="utf-8" ?>
          <chart caption="全校年龄分布图" 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="我是幼儿园的学生"/>
    
            <styles>
    
              <definition>
    
                <style type="font" name="CaptionFont" size="25" color='FFFFFF' />
    
                <style type="font" name="SubCaptionFont" bold="10" />
                
              </definition>
    
              <application>
    
                <apply toObject="caption" styles="CaptionFont" />
    
                <apply toObject="SubCaption" styles="SubCaptionFont" />
                
    
              </application>
    
            </styles>
    </chart>

StudentData.xml

5、简单的介绍XML中的参数吧：

1.  1.  1.  caption 图表显示的标题
        2.  subCaption 副标题
        3.  showBorder是否显示边框如果是1说明为True，0为false
        4.  startingAngle (饼状图中用到)初始的角度
        5.  bgAngle 背景的角度
        6.  bgColor 背景的颜色
        7.  enableRotation 是否允许旋转，1表示可以旋转，0为不允许旋转
        8.  decimals  举个例子来说，就是说如果一个数值为999.999，如果decimals设置为0.则显示的结果就是999.可以理解成小数位数
        9.  palette 表示采用的风格
        10. formatNumberScale 格式化数字的意思。
        11. XAxisName 在柱状图中表示横坐标的Name，YAxisName表示纵坐标的Name
        12. set的Label表示显示在图表中的Name，Value则代表值，
        13. set中的isSliced，是否分裂，1代表True,0为false
        14. set中的displayValue，相当于属性上加\[DisplayName\]是一样的，图表上显示的名称
        15. <styles>中，<definition>可以自定义格式，包括字体的大小，前景色，背景色，等等                   <application>中toObject="caption" styles="CaptionFont",意思是采用的Style，name为CaptionFont，映射到caption对象上，也就是主标题的意思。

![SouthEast 3][]

使用isSliced产生的分裂效果

![SouthEast 4][]

使用displayValue的显示自定义名称的效果

![SouthEast 5][]

6、使用JSon格式作为数据源，添加一个JSon文件，我是先添加的一个类，然后重命名为.json格式，记得前台要改为**                   **

**                         **chart.**setJSONUrl**("@Url.Content("~/Demo.json")");使用JSON格式进行渲染，

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

{
        "chart": {
            "caption": "'饼状图使用JSon'",
            "formatnumberscale": "0"
        },
        "data": [
            {
                "label": "B",
                "value": "51852"
            },
            {
                "label": "C",
                "value": "88168"
            },
            {
                "label": "D",
                "value": "73897"
            },
            {
                "label": "E",
                "value": "93933"
            },
            {
                "label": "F",
                "value": "19289"
            },
            {
                "label": "G",
                "value": "79623"
            },
            {
                "label": "H",
                "value": "48262"
            },
            {
                "label": "I",
                "value": "29162"
            },
            {
                "label": "J",
                "value": "96878"
            },
            {
                "label": "K",
                "value": "81241"
            },
            {
                "label": "L",
                "value": "40652",
                "issliced": "1"
            },
            {
                "label": "M",
                "value": "37581",
                "issliced": "1"
            },
            {
                "label": "N",
                "value": "2882"
            },
            {
                "label": "O",
                "value": "746"
            },
            {
                "label": "P",
                "value": "7155"
            },
            {
                "label": "Q",
                "value": "12072"
            },
            {
                "label": "R",
                "value": "45608"
            },
            {
                "label": "S",
                "value": "72570"
            },
            {
                "label": "T",
                "value": "44799"
            },
            {
                "label": "U",
                "value": "71887"
            },
            {
                "label": "V",
                "value": "78170"
            }
        ]
    }

JSON数据源

![SouthEast 6][]

**使用JSON格式的柱状图效果：**

![SouthEast 7][]

**二、使用DataVisualization实现以下 的效果：**

**               ![SouthEast 8][] **

**                       ![SouthEast 9][]**

**                  ![SouthEast 10][]**

思路：

1、首先添加引用：System.Web.DataVisualization.dll,没有的话，在源码中下载，dll生成到本地就行。

2、数据源没有FusionCharts那么复杂，他使用的知识一个普通的集合类型。

3、前台渲染，也只是一张图片而已，不需要Jquery进行操作（原因：只是一个2D的效果）。

4、后台返回的是一个AcionResult下FileResult下的FileStreamResult（二进制流）。

5、这个插件就不介绍那么多了，代码中基本都有注释。

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

public List<Student> DB()
            {
                List<Student> students = new List<Student>()
                {
                    new Student {ID=1,Name="田鑫",Age=23 },
                    new Student {ID=2,Name="顾燕",Age=24 } ,
                    new Student { ID=3,Name="周杰伦",Age=30 } ,
                    new Student { ID=4,Name="王力宏",Age=32} ,
                    new Student { ID=5,Name="潘玮柏",Age=30 } ,
                    new Student {ID=6,Name="罗志祥",Age=29  },
                     new Student {ID=7,Name="田鑫",Age=23 },
                    new Student {ID=8,Name="顾燕",Age=24 } ,
                    new Student { ID=9,Name="周杰伦",Age=30 } ,
                    new Student { ID=10,Name="王力宏",Age=32} ,
                    new Student { ID=11,Name="潘玮柏",Age=22 }
                  }
              }
            }

数据源代码（只给了一小部分数据，最好添加多点，效果会明显很多）

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

public List<int> ListAge()
            {
                List<int> egNumList = new List<int>();
                int count1 = DB().Where(p=>p.Age>5&&p.Age<10).Count();
                int count2 = DB().Where(p => p.Age >10 && p.Age < 20).Count();
                int count3 = DB().Where(p => p.Age > 20 && p.Age < 30).Count();
                int count4 = DB().Where(p => p.Age > 30).Count();
                egNumList.Add(count1);
                egNumList.Add(count2);
                egNumList.Add(count3);
                egNumList.Add(count4);
                return egNumList;
            }

计算出各个年龄段的人数

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

public FileResult GetChart()
            {
                string[] xval = { "5~10", "10~20", "20~30", "30以上" };
                string xTitle = "各个年龄段人数";
                return publicChart(xTitle, xval);
            }

统计柱状图核心代码

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

private FileResult publicChart(string xTitle, string[] xVal)
            {            
                Chart Chart2 = new Chart();
                Chart2.Width = 860;
                Chart2.Height = 520;
                Chart2.RenderType = RenderType.ImageTag;
                Chart2.Palette = ChartColorPalette.BrightPastel;
                Title t = new Title("全校年龄统计表", Docking.Top, new System.Drawing.Font("Trebuchet MS", 12, System.Drawing.FontStyle.Bold), System.Drawing.Color.FromArgb(26, 59, 105));
                Chart2.Titles.Add(t);
                Chart2.ChartAreas.Add("b");
                //右侧显示的文字（）
                Chart2.Series.Add("数量");
                //ListAge()：各个年龄段的人数
                List<int> yValues = ListAge();
                Chart2.Series["数量"].Points.DataBindXY(xVal, yValues);
                //SeriesChartType.Column：饼状图还是柱状图
                Chart2.Series["数量"].ChartType = SeriesChartType.Column;
                Chart2.ChartAreas[0].Area3DStyle.Enable3D = true;
    
                Chart2.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
                Chart2.BorderColor = System.Drawing.Color.FromArgb(26, 59, 105);
                Chart2.BorderlineDashStyle = ChartDashStyle.Solid;
                Chart2.BorderWidth = 2;
                Chart2.Series["数量"].IsValueShownAsLabel = true;//显示每个柱体的数据
                Chart2.Series["数量"].MarkerStyle = MarkerStyle.Diamond;
                Chart2.Series["数量"].MarkerSize = 8;
    
                //  Chart2.ChartAreas[0].AxisY.Title = "yyyyyyy";
                Chart2.ChartAreas[0].AxisX.Title = xTitle;
                Chart2.ChartAreas[0].AxisX.Interval = 1;//X轴标题间隔
                //动态显示Y轴标题间隔
                int sumValues = 0, avyValues = 100;
                foreach (int yValue in yValues)
                {
                    sumValues += yValue;
                }
                if (sumValues > 1000 && sumValues < 10000)
                    avyValues = (sumValues / 1000) * 100;
                else if (sumValues >= 10000)
                    avyValues = (sumValues / 10000) * 1000;
                Chart2.ChartAreas[0].AxisY.Interval = avyValues;//Y轴标题间隔
                Chart2.Legends.Add("Legend1");
                MemoryStream momory = new MemoryStream();
                Chart2.SaveImage(momory, ChartImageFormat.Png);
                momory.Position = 0;
                return new FileStreamResult(momory, "image/png");
            }

返回到前台的内容

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

前台View（放一个<image>即可）

**三、总结：说了两款比较常用的“统计图表”插件，如果对您有一点点帮助的话，右下角“推荐”一下，代码中如有Bug，请留言。**

[SouthEast]: /images/20211122/75700148bf1948e1a57ad457d4e609ca.png
[SouthEast 1]: /images/20211122/b3df80ac2e6745df81b4109b9ed9f1b7.png
[SouthEast 2]: /images/20211122/c6045eaf2a7e471f99aa56bacb55b26b.png
[Link 1]: http://www.fusioncharts.com/download/sample-applications/
[ContractedBlock.gif]: http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211122/7c9ff114f1ab4a5a8ec28ab3b4f35d53.png
[SouthEast 3]: /images/20211122/c1c55f7751cb46bc8801a9ef73a04e7c.png
[SouthEast 4]: /images/20211122/0c73c153a59d4908990d791deb114b66.png
[SouthEast 5]: /images/20211122/aedc81c5d783402c96b31c0d428acb6d.png
[SouthEast 6]: /images/20211122/ba71bb08713846db9051743a2015c74d.png
[SouthEast 7]: /images/20211122/d4be6fdf8f694b58855825dde6c718e3.png
[SouthEast 8]: /images/20211122/55a66d8eb2bf4c9c91e0a6900f7cc95b.png
[SouthEast 9]: /images/20211122/dfce70a728714f6faddb5977d0421fb2.png
[SouthEast 10]: /images/20211122/91c4e0590c71409a9dd6db595c9f2d3a.png