一、相信朋友们在开发的过程中都会使用到“数据统计”的功能,图表的统计更为直观,在这里就介绍两款插件: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 id="divChart"></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", "", "", "");
chart.setXMLUrl("@Url.Content("~/StudentData.xml")");
chart.render("divChart");
});
</script> <div id="divChart"></div>

Index View

4、XML数据格式如下:

<?xml version="1.0" encoding="utf-8" ?>
<chart caption="全校年龄分布图" subCaption="年龄"
showBorder="" startingAngle="" bgAngle="" bgRatio="0,100" bgColor="99ccff,ffffff"
enableRotation="" enableSmartLabels="" decimals="" palette=""
formatNumberScale="" XAxisName="横坐标" YAxisName="纵坐标"> <set label="年龄在20~24之间" value="" isSliced=""/>
<set label="年龄在15~20之间" value="" isSliced=""/>
<set label="年龄在11~15之间" value="" isSliced=""/>
<set label="年龄在8~11之间" value="" isSliced=""/>
<set label="年龄在5~8之间" value="" isSliced=""/>
<set label="年龄在3~5之间" value="" isSliced="" displayValue="我是幼儿园的学生"/> <styles> <definition> <style type="font" name="CaptionFont" size="" color='FFFFFF' /> <style type="font" name="SubCaptionFont" bold="" /> </definition> <application> <apply toObject="caption" styles="CaptionFont" /> <apply toObject="SubCaption" styles="SubCaptionFont" /> </application> </styles>
</chart>

StudentData.xml

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

      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对象上,也就是主标题的意思。

使用isSliced产生的分裂效果

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

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

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

{
"chart": {
"caption": "'饼状图使用JSon'",
"formatnumberscale": ""
},
"data": [
{
"label": "B",
"value": ""
},
{
"label": "C",
"value": ""
},
{
"label": "D",
"value": ""
},
{
"label": "E",
"value": ""
},
{
"label": "F",
"value": ""
},
{
"label": "G",
"value": ""
},
{
"label": "H",
"value": ""
},
{
"label": "I",
"value": ""
},
{
"label": "J",
"value": ""
},
{
"label": "K",
"value": ""
},
{
"label": "L",
"value": "",
"issliced": ""
},
{
"label": "M",
"value": "",
"issliced": ""
},
{
"label": "N",
"value": ""
},
{
"label": "O",
"value": ""
},
{
"label": "P",
"value": ""
},
{
"label": "Q",
"value": ""
},
{
"label": "R",
"value": ""
},
{
"label": "S",
"value": ""
},
{
"label": "T",
"value": ""
},
{
"label": "U",
"value": ""
},
{
"label": "V",
"value": ""
}
]
}

JSON数据源

使用JSON格式的柱状图效果:

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

                

                       

                  

思路:

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

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

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

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

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

 public List<Student> DB()
{
List<Student> students = new List<Student>()
{
new Student {ID=,Name="田鑫",Age= },
new Student {ID=,Name="顾燕",Age= } ,
new Student { ID=,Name="周杰伦",Age= } ,
new Student { ID=,Name="王力宏",Age=} ,
new Student { ID=,Name="潘玮柏",Age= } ,
new Student {ID=,Name="罗志祥",Age= },
new Student {ID=,Name="田鑫",Age= },
new Student {ID=,Name="顾燕",Age= } ,
new Student { ID=,Name="周杰伦",Age= } ,
new Student { ID=,Name="王力宏",Age=} ,
new Student { ID=,Name="潘玮柏",Age= }
}
}
}

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

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

计算出各个年龄段的人数

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

统计柱状图核心代码

        private FileResult publicChart(string xTitle, string[] xVal)
{
Chart Chart2 = new Chart();
Chart2.Width = ;
Chart2.Height = ;
Chart2.RenderType = RenderType.ImageTag;
Chart2.Palette = ChartColorPalette.BrightPastel;
Title t = new Title("全校年龄统计表", Docking.Top, new System.Drawing.Font("Trebuchet MS", , System.Drawing.FontStyle.Bold), System.Drawing.Color.FromArgb(, , ));
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[].Area3DStyle.Enable3D = true; Chart2.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
Chart2.BorderColor = System.Drawing.Color.FromArgb(, , );
Chart2.BorderlineDashStyle = ChartDashStyle.Solid;
Chart2.BorderWidth = ;
Chart2.Series["数量"].IsValueShownAsLabel = true;//显示每个柱体的数据
Chart2.Series["数量"].MarkerStyle = MarkerStyle.Diamond;
Chart2.Series["数量"].MarkerSize = ; // Chart2.ChartAreas[0].AxisY.Title = "yyyyyyy";
Chart2.ChartAreas[].AxisX.Title = xTitle;
Chart2.ChartAreas[].AxisX.Interval = ;//X轴标题间隔
//动态显示Y轴标题间隔
int sumValues = , avyValues = ;
foreach (int yValue in yValues)
{
sumValues += yValue;
}
if (sumValues > && sumValues < )
avyValues = (sumValues / ) * ;
else if (sumValues >= )
avyValues = (sumValues / ) * ;
Chart2.ChartAreas[].AxisY.Interval = avyValues;//Y轴标题间隔
Chart2.Legends.Add("Legend1");
MemoryStream momory = new MemoryStream();
Chart2.SaveImage(momory, ChartImageFormat.Png);
momory.Position = ;
return new FileStreamResult(momory, "image/png");
}

返回到前台的内容

<image src="/Home/GetChart" name="TX" />

前台View(放一个<image>即可)

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

介绍两款常用的“图表统计图"的插件的更多相关文章

  1. 介绍两款Linux文件恢复工具,ext3grep与extundelete https://www.cnblogs.com/lazyfang/p/7699994.html

    介绍两款Linux文件恢复工具,ext3grep与extundelete,可能在关键时刻会有所帮助.ext3grep仅对ext3文件系统有效,extundelete对ext3与ext4文件系统都有效  ...

  2. 【推荐】介绍两款Windows资源管理器,Q-Dir 与 FreeCommander XE(比TotalCommander更易用的免费资源管理器)

    你是否也像我一样,随着硬盘.文件数量的增加,而感到对于文件的管理越来越乏力. 于是我试用了传说中的各种软件,包括各种Explorer外壳,或者第三方资源管理器. 最后我确定下来经常使用,并推荐给您的是 ...

  3. 介绍几款常用的在线API管理工具

    在项目开发过程中,总会涉及到接口文档的设计编写,之前使用的都是ms office工具,不够漂亮也不直观,变更频繁的话维护成本也更高,及时性也是大问题.基于这个背景,下面介绍几个常用的API管理工具,方 ...

  4. 分享10款常用的jQuery焦点图插件

    爱编程一直在收集整理编程相关的知识和解决方案,今天小编为大家带来10款非常常用的jquery焦点图插件. 1.jQuery可自动播放动画的焦点图插件 之前我们已经分享过很多非常实用的jQuery焦点图 ...

  5. 介绍一款可以滚动加载的插件droploader

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 如何使用火狐下的两款接口测试工具RESTClient和HttpRequester发送post请求

    Chrome下有著名的Postman,那火狐也有它的左膀右臂,那就是RESTClient和HttpRequester.这两款工具都是火狐的插件,主要用来模拟发送HTTP请求,HTTP请求最常用的两种方 ...

  7. 两款【linux字符界面下】显示【菜单】,【选项】的powershell脚本模块介绍

    两款[linux字符界面下]显示[菜单],[选项]的powershell脚本模块介绍 powershell linux  ps1 menu choice Multiselect 传教士 菜单 powe ...

  8. 1. Android 系统上一款开源的图表库

    1. MPAndroidChart  MPAndroidChart 是 Android 系统上一款开源的图表库.目前提供线图和饼图,支持选择.缩放和拖放. 一个可以拖动缩放的图表库,包含曲线图.直方图 ...

  9. 两款JSON类库Jackson与JSON-lib的性能对比(新增第三款测试)

    本篇文章主要介绍了"两款JSON类库Jackson与JSON-lib的性能对比(新增第三款测试)",主要涉及到两款JSON类库Jackson与JSON-lib的性能对比(新增第三款 ...

随机推荐

  1. 在我的电脑右键 Manage 拒绝访问的解决方法

    为什么我的电脑右键里的“管理”会变成“manage”啦.原来是中文的,点了之后出来一个对话框,标题是“桌面”说是“拒绝访问” 是系统环境变量里少了 windir=C:\WINDOWS 方法是:打开系统 ...

  2. CSS控制表格嵌套

    网页设计应用中,当我们不能完全放弃表格的使用时,为了达到预期的效果,不免要用到表格嵌套(特别是多层嵌套)方式来进行布局.可能很多同仁都遇到过这样的问题,为了达到显示效果要为每一个(每一层)的表格写不同 ...

  3. 十 Django框架,Cookie

    注意:获取Cookie是在请求对象里处理,设置Cookie是在响应对象里处理 普通Cookieset_cookie()设置普通cookie 参数: key, 键 value='', 值 max_age ...

  4. Eclipse_常用技巧_03_字母大小写转换快捷键

    eclipse中字母大小写转换快捷键: ctrl+shift+x 转为大写 ctrl+shift+y 转为小写

  5. SQL多列查询最大值

    直接从某一列查询出最大值或最小值很容易,通过group by字句对合适的列进行聚合操作,再使用max()/min()聚合函数就可以求出. 样本数据如下: key_id x y z A 1 2 3 B ...

  6. C++中函数模版和普通函数的区别

    函数模版和同名普通函数在同一个作用域中,会优先调用那个函数? 函数模型在进行调用的时候会进行严格的类型匹配,而普通函数在调用的时候,会进行函数参数类型转换(前提是自动类型转换). 调用函数模版,本质是 ...

  7. stl_pair.h

    stl_pair.h // Filename: stl_pair.h // Comment By: 凝霜 // E-mail: mdl2009@vip.qq.com // Blog: http://b ...

  8. 【leetcode刷题笔记】Longest Consecutive Sequence

    Given an unsorted array of integers, find the length of the longest consecutive elements sequence. F ...

  9. WC2010 BZOJ1758 重建计划_长链剖分

    题目大意: 求长度$\in [L,U]$的路径的最大边权和平均值. 题解 首先二分就不用说了,分数规划大家都懂. 这题有非常显然的点分治做法,但还是借着这个题学一波长链剖分. 其长链剖分本身也没啥,就 ...

  10. poj 1845 Sumdiv(约数和,乘法逆元)

    题目: 求AB的正约数之和. 输入: A,B(0<=A,B<=5*107) 输出: 一个整数,AB的正约数之和 mod 9901. 思路: 根据正整数唯一分解定理,若一个正整数表示为:A= ...